diagnostic · one of 36 free, no counter
Font loading
Why is my font not loading?
A missing webfont does not throw. It falls back, the page looks nearly right, and on your machine it may look exactly right because you have the font installed. This compares what the page declared against what is being painted, and separates the two.
Reach it Press ⌘ + K on any tab and type font loading. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
faces that never arrived, fell back, or were only localWhen typography looks right locally and wrong in a screenshot from somebody else, and when a page flashes before settling. The local-copy case is the one worth running deliberately - it is invisible from the machine that has the font.
Why a font does not appear
in the order they are worth checking- the file failed
- a 404, a CORS refusal, or a MIME type the browser will not accept as a font
- the range excluded it
- a
unicode-rangethat does not cover the characters on the page - nothing requested it
- declared, downloaded by nothing, because no rule names that family
- the weight does not exist
- a 600 asked of a family shipping 400 and 700 - the browser synthesises one
- display: block, still swapping
- the face is coming; what you are looking at is the block period
Asked about this diagnostic
3 of themIt says the font loaded and I can see it has not.
Then the element is not asking for it. Point at the text: the painted family is read from the element, not from the stylesheet, so a font-family overridden further down the cascade shows up here as a different answer.
Does it tell me the licence?
No, and nothing that reads a page can. It tells you the family, the file and the origin it came from, which is what you need to go and look the licence up.
Why is my variable font loading twice?
Usually two declarations of the same family with different unicode-range values, which is correct, or the same file declared under two names, which is not. Both are visible in the first pass.
how to use font loading
- Open Font loading on the page whose typography looks wrong somewhere else.
- Read what was declared against what is being painted right now.
- Check the flagged rows: declared but never used, and the fallback actually on screen.
- The painted fallback is the answer when type looks right here and wrong in somebody else's screenshot.
written about at length
70 of these · no host permissions · three free audits