Web fonts in 2025: what real sites do
How websites load fonts in 2025: how many use them, where they come from, which formats win, how big the files are and which font-display value is most common.
In this guide
How common web fonts are
In the 2025 Web Almanac, web fonts were found on roughly 88% of websites, up from about 87% in 2024. The measure is the share of pages that request web font files. The other 12% or so stay with the fonts already on the visitor's device. The Almanac says growth has slowed because use is close to saturation.
That makes fonts a shared cost. Almost every page asks for at least one file, often more, and each file is a request that must arrive before the text can look right. See web fonts and speed for the costs.
Where fonts come from
| Where the fonts come from | Share of sites |
|---|---|
| At least one font from the site's own address | About 72% |
| Only the site's own fonts | About 34% (32% desktop, 36% mobile) |
| Own fonts plus a font service | About 32% on mobile, 36% on desktop |
| A font service only, mostly Google Fonts | About 28% of sites, with Google Fonts alone on 12% to 13% |
These are the Almanac's rounded figures, and the groups overlap, so they do not add up exactly. Google Fonts was on about 54% of desktop sites and 47% of mobile sites. Adobe Fonts was on about 4%, and Font Awesome, an icon font, on about 3% to 4%.
The direction is toward self-hosting. About a third of sites now host all their fonts themselves, up from about 30% a year earlier. The Almanac says one reason is that modern browsers no longer share a cache between sites, which took away part of the old speed advantage of using Google's servers. It also names privacy as a likely reason.
For your site, this means a font service is the choice of a large minority and no longer the safe default. If you use one, the connection to another host is a cost you can measure. See DNS, TLS and connections and resource hints.
Which file formats
| Format | Share of font requests, desktop | Mobile |
|---|---|---|
| WOFF2 | 65.2% | 65.4% |
| WOFF | 16.0% | 15.8% |
| TTF | 6.7% | 6.8% |
Served as application/octet-stream | 6.7% | 6.6% |
| Other | 5.5% | 5.5% |
WOFF2 is the standard: it compresses well and every modern browser supports it. WOFF is now mostly a fallback for older files. The application/octet-stream row is not a format. It means the server sent the file with a generic content type instead of the right one, such as font/woff2. The Almanac calls this a misconfiguration and says it is still common.
Sites that host their own fonts trail a little. In the Almanac's chart for mobile pages, about 74% of self-hosted font files were WOFF2, against about 77% of Google-hosted ones. The Almanac advises self-hosters to make sure they have WOFF2 files and to send them with the correct content type.
How big the files are
| Point in the spread | Font file size, as transferred |
|---|---|
| Median | About 35 to 36 KB |
| Three in four files are under | About 75 KB |
| Nine in ten files are under | About 115 KB |
| The largest 1% | Hundreds of KB |
The Almanac suggests that the median font file has grown over the years, because fonts carry more glyphs or bundle several styles, as variable fonts do. The big ones tend to be fonts for scripts with thousands of characters, icon fonts, fonts with many axes and files that have not been subset. WOFF2 helps, but for a very large font it can only do so much. Subsetting, which keeps only the characters needed, matters most there.
The Almanac notes that sites often use several fonts, so fonts still add weight. Add up your own in the Network panel and compare.
How sites load them
font-display
| Value | Share of sites, desktop | Mobile |
|---|---|---|
swap | 49.6% | 50.1% |
block | 24.7% | 24.9% |
auto | 9.1% | 8.5% |
fallback | About 5% | About 5% |
optional | About 0.5% | About 0.5% |
swap shows the text at once in a fallback font and switches when the real font arrives. block hides the text briefly. The Almanac found that about 70% of the block use is on icon font styles, where authors prefer a short delay to broken symbols, so block on body text is rare. optional is the strictest: the browser often does not swap at all if the font is not ready at once. It is also the rarest. See fixing font layout shift for the trade-off.
Resource hints for fonts
| Hint | Share of sites, desktop | Mobile |
|---|---|---|
preconnect | 18.3% | 17.7% |
dns-prefetch | 14.6% | 14.7% |
preload | 12.0% | 11.7% |
prefetch | 0.6% | 0.6% |
preconnect is the most common. dns-prefetch is falling, which the Almanac puts down to sites moving to preconnect. preload is rising slowly, up from about 11.0% in 2024 on desktop. The Almanac says preloading a font lets the browser fetch it as soon as it sees the hint, instead of waiting for the style sheet and then the font rule.
Variable fonts
About 39% of desktop sites and 41% of mobile sites used at least one variable font in 2025, up from about 33% and 34% in 2024. A variable font holds several styles, such as weights, in one file. Most sites use them only for weight: the weight axis was set explicitly on 57% to 61% of the pages using a variable font. Some of the other axes the Almanac saw come from a popular variable icon font, not from text. Variable fonts can reduce requests, and can also be larger than one static file, so check the byte count.
What to do with these numbers
- Check the formats. Open the Network panel, filter by Font, and look at the type of each file. If you see TTF, OTF or WOFF, move to WOFF2. If the content type says
application/octet-stream, ask the host to fix it. - Count the files and add up the bytes. If your fonts are much heavier than the median, remove a weight or a family, or subset the file.
- Look at where they come from. If you use a font service, test your page with the fonts hosted on your own address. Keep whichever is faster for your visitors.
- Choose `font-display` on purpose.
swapis the common choice for text. For icon fonts, check that a missing icon does not leave a gap. - Preload only the key font. If the main heading or body text depends on a web font, one preload can bring it forward. Preloading many fonts delays other files. See web fonts and speed.
- Match the fallback font so the swap does not move the text.
Mistakes to avoid
- Assuming that popular means right. Half the web uses
swap, and that does not make it right for every font. - Loading every weight a font offers. Each one is a file.
- Preloading five fonts. Choose the one or two the top of the page needs.
- Forgetting the icon font. One icon font can be larger than all your text fonts.
- Ignoring the content type. A font sent as
application/octet-streamis a server fault that can be fixed in one place.
Check your own page
Run the free audit and look at the fonts in the list of requests. Then follow the six steps above in order, and run the audit again.
Sources
- Fonts chapter, Web Almanac 2025: usage, hosting, formats, file sizes, resource hints,
font-displayvalues and variable fonts. - Web fonts and speed and the other guides linked above, which carry the sources for the advice.
- Performance chapter, Web Almanac 2025: the wider performance context for these figures.
Start here
Free website audit
Live Google data for any public page: mobile and desktop.
Mobile + desktop · Lighthouse lab test · Real-user Chrome data when Google has it
Rather have this done for you? Speed optimization · Book a call