Font Integration Tester

Verify that a web font actually loads in your browser. Detects silent fallback substitution by comparing measured glyph widths against the fallback. Catches broken @font-face rules, wrong MIME types, CORS failures, and misspelled family names.

What the integration tester catches

  • Misspelled family names — the browser silently falls back to the next font in the stack
  • Wrong MIME types — some browsers ignore @font-face for fonts served as text/html or application/octet-stream
  • CORS failures — cross-origin fonts without proper Access-Control-Allow-Origin headers
  • Broken @font-face URLs — 404 responses cause silent fallback
  • Empty or corrupted WOFF2 files — the font parser rejects them
  • Failed network requests — offline, blocked by ad-blocker, or blocked by privacy settings

How the measurement works

The tool renders the string mmmmmmmmmmlli WW in a canvas using:

  1. The fallback font monospace — this gives a baseline width.
  2. Your target font family with monospace as fallback — this gives the target width.

If the widths differ by more than 0.5px, the target font loaded. If they match exactly, the browser silently fell back to monospace — meaning your font is not actually being used. This is the same technique used by tools like Fontfaceobserver and Webfontloader, and it is the only reliable way to detect silent font fallback in a browser.

Note about test fonts: This tool loads the font from Google Fonts to guarantee the test works. For testing self-hosted fonts, add your @font-face rule to the page first, then test the family name you declared.

Frequently asked questions

How does the integration tester work?

It measures the rendered width of a fixed string with the fallback font and again with the target font. Different widths mean the target font loaded. Matching widths mean silent fallback.

Why would a font silently fail to load?

Common causes: wrong family name, CORS misconfiguration, incorrect MIME type, invalid URL, corrupted WOFF2 file, or privacy settings blocking the request.

Does this test work for self-hosted fonts?

Yes, if you first add your @font-face rule to the page, then enter the exact family name you declared. The tool measures the rendered result, so any loaded font works.

What if the font reports loaded but metrics match the fallback?

The browser may have substituted a fallback silently. Check your browser console for font errors, verify the MIME type, and ensure CORS headers are correct.

Can I test multiple weights at once?

One weight per test run. For variable fonts, test each weight you plan to use in production.

Related tools

@font-face GeneratorBuild the CSS rule first. Preload GeneratorSpeed up loading. Performance CheckerAnalyse font files. Metadata AnalyzerRead font family name from file.