Font family button-CodePudding

I'm trying to create a website of about five pages for a project using HTML, CSS, and Javascript. I've created a font family button using all three languages.

The role of this button is to change the font family of the entire website when the button is pressed.

It's not working, and nothing happens when I press the font button on my website.

function fontfamily() {
  document.body.classList.toggle("textstyles")
}

body.textstyles {
  font-family: Arial, Helvetica, sans-serif;
}

<button type="button" onclick="fontfamily()">Font</button>

<p>Example text</p>

CodePudding user response：

Try out this. Button needs to be given a font-family: inherit style to inherit it's style from it's parent (which is body) instead of taking a style from user style sheet.

function fontfamily() {
  document.body.classList.toggle("textstyles")
}

body.textstyles {
  font-family: Arial, Helvetica, sans-serif !important;
}
button{
  font-family: inherit;
}

<button type="button" onclick="fontfamily()">Font</button>

CodePudding user response：

function fontfamily() {
  document.body.classList.toggle("textstyles")
}

body.textstyles {
    font-family: Arial, Helvetica, sans-serif;
    }

 <button type="button" onclick="fontfamily()">Font</button>
!!! hello world !!!

lorem elum ipsum ....

you need to add some text and its working ???