To check web fonts on a website, you need to look past the page itself into its stylesheets, where the @font-face rules live. This checker reads the page and up to eight of its stylesheets, lists every web font with its format, font-display value and preload, and flags fonts loaded from other servers such as Google Fonts. A second tab writes @font-face rules and preload tags for fonts you host yourself.
Why fonts matter for speed
A custom font is a file the browser must download before it can draw text in that font. Until it arrives, the browser either shows nothing (invisible text) or shows a fallback font and swaps later. Both can hurt:
- Invisible text delays Largest Contentful Paint when the biggest element on screen is a heading or a paragraph.
- A late swap can shift the layout when the new font is wider or taller than the fallback, which counts against Cumulative Layout Shift.
- Every extra weight (regular, bold, italic, bold italic) is another file to fetch.
- Fonts from another server need an extra connection before the download can start.
Fonts are rarely the biggest problem on a page, but they are one of the easiest to fix.
What the checker looks for
| Check | Good | Why |
|---|---|---|
| Format | WOFF2 | Best compression; every current browser reads it |
| font-display | swap or optional | Text shows at once with a fallback font |
| Preload | 1 or 2 fonts, with crossorigin | The browser starts the download early |
| Number of files | 2 to 4 | Each weight and style is a separate download |
| Host | Your own domain | No extra connection and no third party |
| Base64 fonts | None | Fonts inside CSS make the stylesheet heavy and block rendering |
For Google Fonts links, the checker reads the link itself and tells you whether it asks for display=swap. It does not read Google's CSS, because Google sends a different file to each browser.
How to check web fonts on a website with this tool
- Enter the page address and press Check fonts.
- Read the result lines. Each one is a check from the table, with what to change.
- Read the font table. One row per @font-face rule: family and weight, file and format, font-display and whether it is preloaded.
- Switch to "Make @font-face" if you decide to host the fonts yourself.
The tool reads the HTML and CSS the server sends and does not run JavaScript, so a font loaded by a script, such as some font kits, may be missing from the list.
Fixes, from easiest to most work
- Add font-display. One line in each @font-face rule:
font-display: swap;. On Google Fonts, add&display=swapto the link. - Drop weights you do not use. Many themes load six or eight weights and use two.
- Use WOFF2 only. Old formats such as TTF, EOT and SVG fonts are no longer needed for current browsers.
- Preload the main text font. Only the one or two used on the first screen, and always with
crossorigin, or the browser downloads the file twice. - Host the files yourself. Download the WOFF2 files, put them in a folder such as /fonts/, and use the generated @font-face rules. This removes the extra connection.
- Or use system fonts. A system font stack shows instantly, never shifts and costs no download. For a text-heavy site it is a fair choice.
Matching the fallback font
With font-display: swap, the page first shows a fallback such as Arial, then switches to your font. If the two have very different widths, lines rewrap and the page jumps. Two small steps help. Pick a fallback close in shape: a sans-serif for a sans-serif font. And, in newer browsers, adjust the fallback with the size-adjust descriptor in a second @font-face rule so it takes up the same space. Even without that, a short font list and one preload remove most of the jump.
A note on privacy
When a page loads a font from another company's server, each visitor's browser connects to that server and sends its IP address. In some places this has been treated as sharing personal data without consent. A well-known case is a 2022 ruling by a regional court in Munich about Google Fonts. Hosting the font files on your own server avoids the question entirely. This is general information, not legal advice; ask a lawyer about the rules where you and your visitors live.
The generator tab
Type the font family, the folder on your site and one line per file: weight, style and file name. The tool writes one @font-face rule per file with format("woff2") and your font-display choice, a body rule with a good fallback stack, and preload tags for the first two files. Copy both, upload the files, and check the page again.
Run the checker after every theme or plugin change: it is the quickest way to check web fonts on a website and catch a new font that slipped in.
Frequently asked questions
Is font-display: swap or optional better?
swap always shows the custom font once it loads, which may cause a small layout shift. optional uses the custom font only if it arrives very quickly, otherwise it keeps the fallback for that page view, which avoids shifts. For body text, optional is often the calmer choice.
Should I preload every font?
No. Preload only the one or two fonts used above the fold. Preloading every weight makes them compete with the main image and CSS, and can slow the page down.
Is Google Fonts bad for speed?
Not by itself, but it adds a connection to another server, and older embeds often lack display=swap. Self-hosted WOFF2 files with font-display are usually a little faster and avoid the privacy question.
