There are three ways to check whether a web font is actually in use. The first two lie.<\/p>\n
Browsers give you an interface for asking whether a font is available right now.<\/p>\n
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.<\/strong><\/p>\n If the file downloads but lacks the characters you need, the answer is still “available.”<\/p>\n Compare the width before and after the font is applied. If it changed, the font changed.<\/p>\n 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.<\/strong><\/p>\n And if your font happens to be close in width to the system default, the difference disappears into the noise.<\/p>\n Draw the same text to a canvas twice, with two different settings, and compare the pixels.<\/p>\n If the two images are identical, the target font isn’t in use. If they differ, it is.<\/p>\n This doesn’t require trusting what any layer reports. It looks straight at the final result.<\/p>\n \u2b50 Verify as close as you can to what finally appears on screen<\/strong>.<\/p>\n Each layer in between only proves that its own step finished. Failures most often happen in the gaps between layers, where nobody is responsible.<\/p>\n","protected":false},"excerpt":{"rendered":" The load status says success, the measured width changed, and the screen is still showing a different font. Here’s the one check that doesn’t lie.<\/p>\n","protected":false},"author":1,"featured_media":1017,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[30],"tags":[],"class_list":["post-2157","post","type-post","status-publish","format-standard","has-post-thumbnail","category-craft-notes-en-us"],"yoast_head":"\nTwo: measure the text width<\/h2>\n
Three: draw it and compare pixels<\/h2>\n
\n
The general rule<\/h2>\n