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.

BeginnerReference6 min readUpdated October 30, 2026

In this guide
  1. How common web fonts are
  2. Where fonts come from
  3. Which file formats
  4. How big the files are
  5. How sites load them
    1. font-display
    2. Resource hints for fonts
  6. Variable fonts
  7. What to do with these numbers
  8. Mistakes to avoid
  9. Check your own page
  10. Sources

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 fromShare of sites
At least one font from the site's own addressAbout 72%
Only the site's own fontsAbout 34% (32% desktop, 36% mobile)
Own fonts plus a font serviceAbout 32% on mobile, 36% on desktop
A font service only, mostly Google FontsAbout 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

FormatShare of font requests, desktopMobile
WOFF265.2%65.4%
WOFF16.0%15.8%
TTF6.7%6.8%
Served as application/octet-stream6.7%6.6%
Other5.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 spreadFont file size, as transferred
MedianAbout 35 to 36 KB
Three in four files are underAbout 75 KB
Nine in ten files are underAbout 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

ValueShare of sites, desktopMobile
swap49.6%50.1%
block24.7%24.9%
auto9.1%8.5%
fallbackAbout 5%About 5%
optionalAbout 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

HintShare of sites, desktopMobile
preconnect18.3%17.7%
dns-prefetch14.6%14.7%
preload12.0%11.7%
prefetch0.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

  1. 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.
  2. 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.
  3. 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.
  4. Choose `font-display` on purpose. swap is the common choice for text. For icon fonts, check that a missing icon does not leave a gap.
  5. 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.
  6. Match the fallback font so the swap does not move the text.

Mistakes to avoid

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

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

Related guides

All guides →