We’ve tried three ways of checking whether a web font is really in use. The first two fooled us.
One: ask the font API
Browsers provide an interface for asking whether a font is available right now.
What it answers is whether the font was parsed and whether the file finished downloading. It doesn’t answer whether this text on the screen was drawn with that font.
If the font file downloads but doesn’t contain the characters you need, it still says the font is available.
Two: measure the text width
Compare the text width before and after applying the font. If it changed, the font changed.
But switching to a fallback font changes the width too. All the measurement proves is that some font was swapped in, not that it was the one you wanted.
And if the target font is about as wide as the system default, the difference gets so small you can’t tell it from noise.
Three: draw it and compare pixels
Draw the same text to a canvas twice with two different settings, then compare the pixels:
- Once with the target font
- Once with a font name that definitely doesn’t exist, which forces the browser back to the system default
If the two images are identical, the target font isn’t being used. Only if they differ is it in use.
This method doesn’t require trusting what any layer reports. It looks at what actually got drawn.
When we verify now, we try to look as close as we can to the layer that finally appears on screen. Every layer before it can only prove that its own part finished.
