Tengo el siguiente CSS:
:root{ --font-family: "Times", serif; } body{ font-family: var(--font-family); }También tengo un menú desplegable con los siguientes valores:
serif sans-serif 'Montserrat', sans-serif; 'Source Code Pro', monospace;Uso este menú desplegable para establecer una variable CSS en el cuerpo:
let root = document.documentElement; const fontSelect = document.querySelector("#font") fontSelect.addEventListener("change", e => { console.log(fontSelect.value); root.style.setProperty('--font-family', fontSelect.value); }); Cada vez, se produce el registro de consola correcto; sin embargo, solo se aplican serif y sans-serif en Google Chrome. ¿Cómo puedo hacer 'Montserrat', sans-serif; ¿trabajar?
https://codepen.io/EightArmsHQ/pen/3405e40daa7fcc7b17ff8a0e6a205b66
Necesitas eliminar el ; de tus valores para hacerlo válido.
let root = document.documentElement; const fontSelect = document.querySelector("#font") fontSelect.addEventListener("change", e => { console.log(fontSelect.value); root.style.setProperty('--font-family', fontSelect.value); }); :root{ --font-family: "Times", serif; } body{ font-family: var(--font-family); } <select id="font"> <option value="serif">Serif</option> <option value="sans-serif">Sans serif</option> <option value="'Montserrat', sans-serif">Montserrat</option> <option value="'Source Code Pro', monospace">Source Code Pro</option> </select>