Espero que estés teniendo un gran día. Estoy tratando de hacer que mi sitio sea más accesible, pero realmente me encanta esta fuente. Sin embargo, es difícil de leer para algunas personas. Estoy creando un botón para cambiar todas las fuentes a una fuente más fácil de leer, pero tengo problemas para crear ese código.
document.getElementById('header').style.fontFamily = "font-family: 'Rambla', sans-serif" (y todos los demás selectores DOM allí también), pero tampoco funcionan con no hay errores, o errores.
Aquí hay un fragmento de mi código:
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>Le aconsejo que cambie una clase global en el elemento del cuerpo, por ejemplo.
document.body.classList.add('accessible-font');Entonces le daría más posibilidades y una integración más fácil usando algunas hojas de estilo:
.accessible-font #header { font-family: 'Rambla', sans-serif"; }Luego puede definir algunas reglas globales o específicas basadas en esta clase global. También le permite cambiar fácilmente entre encendido y apagado.
prueba esto ?
<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>