diagnostic · one of 36 free, no counter

Font faces

Q: How is this different from Font loading?

This lists the declarations. Font loading is about what happened at runtime - which families resolved and which quietly fell back to a system face.

Which @font-face rules does this page declare, and does anything use them?

A @font-face block is a declaration, not a download - the browser fetches it only if something matches. So a stylesheet can declare nine weights while the page uses three, and the other six are dead text in a file everybody has to download. This lists the declarations beside what the page actually resolved to.

Reach it Press ⌘ + K on any tab and type font faces. Ctrl + K on Windows and Linux

Every @font-face the page declares, and what each one costs

reads font-face rules and what text resolves to

writes nothing

sends nothing

formats each source listed with its format hint

font-display reported, with what it means for first paint

unused a declaration nothing matches is named

plan free

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

in the panel · free, no counter

section#about

What this actually is

the declared faces, their files and formats

On any site with a webfont stack, before adding a weight, and during a cleanup - a declared face nothing uses is the safest thing on a page to delete.

section#asked

Asked about this diagnostic

4 of them

Is a declared face that is unused a problem?

Only the declaration is wasted - the browser does not fetch a face nothing matches. It is still worth removing, because the next person to read the stylesheet will assume it is in use.

What does font-display: block actually cost?

Up to three seconds of invisible text while the file loads. swap shows a fallback immediately and reflows when the face arrives; which trade-off is right is a design decision, and the row reports rather than grades it.

Why does unicode-range matter?

Because it decides whether a file is fetched at all. A Cyrillic subset on a page with no Cyrillic is never downloaded, which is the whole reason subsetting works.

How is this different from Font loading?

This lists the declarations. Font loading is about what happened at runtime - which families resolved and which quietly fell back to a system face.

how to use font faces

Open Font faces to list every @font-face rule the page declares.
Read each source with its format hint, beside what the page actually resolved to.
Find the declarations nothing matched. Those are named, and they are the safe deletions.
Take that list to the stylesheet before anybody adds another weight to it.

written about at length

typography 6 min The font a page declares is not the font you see A font-family list is a request. What renders depends on which face matched, whether the file arrived in time, and what the browser synthesised instead.

Add LoupeKit

TWO BUILDS 9 browsers

Chrome from the Chrome Web Store Firefox from addons.mozilla.org Edge from Microsoft Edge Add-ons Brave takes the Chrome build Opera takes the Chrome build 4 more the Chrome build

70 of these · no host permissions · three free audits