There are three ways to check whether a web font is actually in use. The first two lie.
One: ask the font API
Browsers give you an interface for asking whether a font is available right now.
What it answers is whether the font description was parsed and the file finished downloading. It doesn’t tell you whether this text on the screen was drawn with it.
If the file downloads but lacks the characters you need, the answer is still “available.”
Two: measure the text width
Compare the width before and after the font is applied. If it changed, the font changed.
The catch is that a fallback font changes the width too. What you’ve measured is that some font was swapped in, not that it’s the one you wanted.
And if your font happens to be close in width to the system default, the difference disappears into the noise.
Three: draw it and compare pixels
Draw the same text to a canvas twice, with two different settings, and compare the pixels.
- Once with the target font
- Once with a font name that is certain not to exist (which forces the system default)
If the two images are identical, the target font isn’t in use. If they differ, it is.
This doesn’t require trusting what any layer reports. It looks straight at the final result.
The general rule
⭐ Verify as close as you can to what finally appears on screen.
Each layer in between only proves that its own step finished. Failures most often happen in the gaps between layers, where nobody is responsible.
