With document.fonts.ready.then
, it is possible to change CSS if a font is loaded.
Example:
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>
Now my question is:
Does something like document.fonts.NOT.ready.then
exist? Or how can I change the CSS if the font gets not loaded?
Would be very thankful for help.