Ask coding questions

← Back to all posts
[HTML] How do you detect if a font loaded?

I have a website thing with some imported fonts. On one of my devices, the main font doesn't load. The fallback font is huge compared to the main one, and I want the font size to decrease if that font is active.
Here's a crappy example if I'm bad at explaining:

If goodFont is the displayed font, a paragraph would look like this:

hello :)

But if goodFont doesn't load and bigFont is displayed instead, it would look like this:

hello :)

Send help?


I'm not sure if it's necessarily the best way to go about doing things, but you could look into using JS's FontFaceSet methods. The compatibility seems to be okay, even though it's labeled as experimental.


@SixBeeps I'm trying that, but it always returns true. Any ideas?