Con document.fonts.ready.then , es posible cambiar CSS si se carga una fuente.
Ejemplo:
document.fonts.ready.then(function() { $("div").css("color", "blue"); }); @font-face { src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/133207/moderna_-webfont.ttf") format("truetype"); font-family: "font"; } div { font-family: "font"; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>Lorem ipusm</div> Ahora mi pregunta es: ¿Existe algo como document.fonts.NOT.ready.then ? ¿O cómo puedo cambiar el CSS si la fuente no se carga?
Estaría muy agradecido por la ayuda.
MDN sugiere que puede buscar
document.fonts.status == 'loading' o .check() para fuentes específicas.
Para errores, agregue un controlador de eventos para onloadingerror
En el fragmento de prueba a continuación, .status cambia a cargado inmediatamente, hay un Failed to load resource inmediatamente, pero no se llama .ready ni .onloadingerror en ese momento, en su lugar, espere 2 minutos y luego se activan los eventos .ready y .onloadingerror junto con otro error GET ERR_CONNECTION_TIMED_OUT (asegúrese de que la consola del navegador esté abierta)
Es probable que esto se deba solo a la URL de la fuente: una coincidencia más cercana a una fuente válida puede devolverse más rápido o un 403 puede devolverse más rápido, etc.
document.fonts.ready.then(function() { $("div").css("color", "blue"); $("div").text(document.fonts.status); }); document.fonts.onloadingerror = () => { $("div").css("background-color", "pink"); } $("div").text(document.fonts.status); @font-face { src: url("https://badurl.com/moderna_-webfont.ttf") format("truetype"); font-family: "font"; } div { font-family: "font"; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>Lorem ipusm</div>