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>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.
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>