How would one successfully change the font of a header/paragraph in javascript?

Question

Hope you're having a great day. I'm trying to make my site more accessible, but I really love this one font. However, it's hard to read for some people. I'm making a button to change all the fonts to an easier to read font, but I'm having trouble creating that code.

I've tried document.getElementById('header').style.fontFamily = "font-family: 'Rambla', sans-serif" (and all of the other DOM selectors there too), But they either don't work with no errors, or it errors.

Here's a snippet of my code:

 function fontChange() { document.getElementById('header').style.fontFamily = "font- family: 'Rambla', sans-serif" console.log('Works?') }

 <h1 id="header">What are the parameters for the /scheme command?</h1> <button id="fontChange" onclick="fontChange()"> </button>

Answer 1

I advice you to toggle a global class on body element for example.

document.body.classList.add('accessible-font');

Then it would give you more possibilities and easier integration using some stylesheets:

.accessible-font #header {
  font-family: 'Rambla', sans-serif";
}

You can then define some global or specific rules based on this global class. It also allows you to easilly switch between a11y ON / OFF.

Answer 2

try this?

    <h1 id="header">What are the parameters for the /scheme command?</h1>
<button id="fontChange" onclick="fontChange()">
  🦽
</button>
<script>
    function fontChange() {
           document.getElementById('header').style.fontFamily = "Rambla"
        console.log('Works?')
    }
</script>