{"id":2157,"date":"2026-08-07T10:00:00","date_gmt":"2026-08-07T10:00:00","guid":{"rendered":"https:\/\/muzi.tw\/thinking\/font-load-pixel-diff-tmp-en-us\/"},"modified":"2026-10-02T05:29:07","modified_gmt":"2026-10-02T05:29:07","slug":"font-load-pixel-diff","status":"publish","type":"post","link":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/","title":{"rendered":"To check a font loaded, measure pixels instead of asking the API"},"content":{"rendered":"<p class=\"mz-nt-lead\">We&#8217;ve tried three ways of checking whether a web font is really in use. The first two fooled us.<\/p>\n<h2>One: ask the font API<\/h2>\n<p>Browsers provide an interface for asking whether a font is available right now.<\/p>\n<p>What it answers is whether the font was parsed and whether the file finished downloading. It doesn&#8217;t answer whether this text on the screen was drawn with that font.<\/p>\n<p>If the font file downloads but doesn&#8217;t contain the characters you need, it still says the font is available.<\/p>\n<h2>Two: measure the text width<\/h2>\n<p>Compare the text width before and after applying the font. If it changed, the font changed.<\/p>\n<p>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.<\/p>\n<p>And if the target font is about as wide as the system default, the difference gets so small you can&#8217;t tell it from noise.<\/p>\n<h2>Three: draw it and compare pixels<\/h2>\n<p>Draw the same text to a canvas twice with two different settings, then compare the pixels:<\/p>\n<ul>\n<li>Once with the target font<\/li>\n<li>Once with a font name that definitely doesn&#8217;t exist, which forces the browser back to the system default<\/li>\n<\/ul>\n<p>If the two images are identical, the target font isn&#8217;t being used. Only if they differ is it in use.<\/p>\n<p>This method doesn&#8217;t require trusting what any layer reports. It looks at what actually got drawn.<\/p>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The load status says success, the measured width changed, and the screen is using a different font anyway.<\/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":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>To check a font loaded, measure pixels instead of asking the API - Muzi Studio<\/title>\n<meta name=\"description\" content=\"The load status says success, the measured width changed, and the screen is using a different font anyway.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"To check a font loaded, measure pixels instead of asking the API - Muzi Studio\" \/>\n<meta property=\"og:description\" content=\"The load status says success, the measured width changed, and the screen is using a different font anyway.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/\" \/>\n<meta property=\"og:site_name\" content=\"Muzi Studio\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-07T10:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-02T05:29:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/muzi.tw\/wp-content\/uploads\/2026\/09\/muzi-nt-font-pixel-70217e99.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"1004\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/\"},\"author\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/#organization\"},\"headline\":\"To check a font loaded, measure pixels instead of asking the API\",\"datePublished\":\"2026-08-07T10:00:00+00:00\",\"dateModified\":\"2026-10-02T05:29:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/\"},\"wordCount\":292,\"publisher\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/muzi.tw\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/muzi-nt-font-pixel-70217e99.jpg\",\"articleSection\":[\"Craft &amp; Tools\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/\",\"url\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/\",\"name\":\"To check a font loaded, measure pixels instead of asking the API - Muzi Studio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/muzi.tw\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/muzi-nt-font-pixel-70217e99.jpg\",\"datePublished\":\"2026-08-07T10:00:00+00:00\",\"dateModified\":\"2026-10-02T05:29:07+00:00\",\"description\":\"The load status says success, the measured width changed, and the screen is using a different font anyway.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/#primaryimage\",\"url\":\"https:\\\/\\\/muzi.tw\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/muzi-nt-font-pixel-70217e99.jpg\",\"contentUrl\":\"https:\\\/\\\/muzi.tw\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/muzi-nt-font-pixel-70217e99.jpg\",\"width\":1800,\"height\":1004,\"caption\":\"Two glass panes stacked on a metal stand with a blue-purple light shining between them\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/thinking\\\/font-load-pixel-diff\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/muzi.tw\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"To check a font loaded, measure pixels instead of asking the API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/muzi.tw\\\/en\\\/\",\"name\":\"Muzi Studio\",\"description\":\"Muzi Studio\",\"publisher\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/muzi.tw\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/#organization\",\"name\":\"Muzi Studio\",\"url\":\"https:\\\/\\\/muzi.tw\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/muzi.tw\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/muzi-logo-512.png\",\"contentUrl\":\"https:\\\/\\\/muzi.tw\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/muzi-logo-512.png\",\"width\":512,\"height\":512,\"caption\":\"Muzi Studio\"},\"image\":{\"@id\":\"https:\\\/\\\/muzi.tw\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"email\":\"hello@muzi.tw\",\"description\":\"A brand, web and content studio in Taipei and Tokyo. We look at your growth goals and where you are today before deciding whether design needs to change.\",\"areaServed\":[\"Taiwan\",\"Japan\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"To check a font loaded, measure pixels instead of asking the API - Muzi Studio","description":"The load status says success, the measured width changed, and the screen is using a different font anyway.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/","og_locale":"en_US","og_type":"article","og_title":"To check a font loaded, measure pixels instead of asking the API - Muzi Studio","og_description":"The load status says success, the measured width changed, and the screen is using a different font anyway.","og_url":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/","og_site_name":"Muzi Studio","article_published_time":"2026-08-07T10:00:00+00:00","article_modified_time":"2026-10-02T05:29:07+00:00","og_image":[{"width":1800,"height":1004,"url":"https:\/\/muzi.tw\/wp-content\/uploads\/2026\/09\/muzi-nt-font-pixel-70217e99.jpg","type":"image\/jpeg"}],"author":"admin","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/#article","isPartOf":{"@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/"},"author":{"@id":"https:\/\/muzi.tw\/en\/#organization"},"headline":"To check a font loaded, measure pixels instead of asking the API","datePublished":"2026-08-07T10:00:00+00:00","dateModified":"2026-10-02T05:29:07+00:00","mainEntityOfPage":{"@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/"},"wordCount":292,"publisher":{"@id":"https:\/\/muzi.tw\/en\/#organization"},"image":{"@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/#primaryimage"},"thumbnailUrl":"https:\/\/muzi.tw\/wp-content\/uploads\/2026\/09\/muzi-nt-font-pixel-70217e99.jpg","articleSection":["Craft &amp; Tools"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/","url":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/","name":"To check a font loaded, measure pixels instead of asking the API - Muzi Studio","isPartOf":{"@id":"https:\/\/muzi.tw\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/#primaryimage"},"image":{"@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/#primaryimage"},"thumbnailUrl":"https:\/\/muzi.tw\/wp-content\/uploads\/2026\/09\/muzi-nt-font-pixel-70217e99.jpg","datePublished":"2026-08-07T10:00:00+00:00","dateModified":"2026-10-02T05:29:07+00:00","description":"The load status says success, the measured width changed, and the screen is using a different font anyway.","breadcrumb":{"@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/#primaryimage","url":"https:\/\/muzi.tw\/wp-content\/uploads\/2026\/09\/muzi-nt-font-pixel-70217e99.jpg","contentUrl":"https:\/\/muzi.tw\/wp-content\/uploads\/2026\/09\/muzi-nt-font-pixel-70217e99.jpg","width":1800,"height":1004,"caption":"Two glass panes stacked on a metal stand with a blue-purple light shining between them"},{"@type":"BreadcrumbList","@id":"https:\/\/muzi.tw\/en\/thinking\/font-load-pixel-diff\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/muzi.tw\/en\/"},{"@type":"ListItem","position":2,"name":"To check a font loaded, measure pixels instead of asking the API"}]},{"@type":"WebSite","@id":"https:\/\/muzi.tw\/en\/#website","url":"https:\/\/muzi.tw\/en\/","name":"Muzi Studio","description":"Muzi Studio","publisher":{"@id":"https:\/\/muzi.tw\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/muzi.tw\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/muzi.tw\/en\/#organization","name":"Muzi Studio","url":"https:\/\/muzi.tw\/en\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/muzi.tw\/en\/#\/schema\/logo\/image\/","url":"https:\/\/muzi.tw\/wp-content\/uploads\/2026\/09\/muzi-logo-512.png","contentUrl":"https:\/\/muzi.tw\/wp-content\/uploads\/2026\/09\/muzi-logo-512.png","width":512,"height":512,"caption":"Muzi Studio"},"image":{"@id":"https:\/\/muzi.tw\/en\/#\/schema\/logo\/image\/"},"email":"hello@muzi.tw","description":"A brand, web and content studio in Taipei and Tokyo. We look at your growth goals and where you are today before deciding whether design needs to change.","areaServed":["Taiwan","Japan"]}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/muzi.tw\/wp-content\/uploads\/2026\/09\/muzi-nt-font-pixel-70217e99.jpg","_links":{"self":[{"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/posts\/2157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/comments?post=2157"}],"version-history":[{"count":3,"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/posts\/2157\/revisions"}],"predecessor-version":[{"id":2617,"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/posts\/2157\/revisions\/2617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/media\/1017"}],"wp:attachment":[{"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/media?parent=2157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/categories?post=2157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/muzi.tw\/en\/wp-json\/wp\/v2\/tags?post=2157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}