Yes, a little. A custom font is one more file the phone has to go and fetch, and the phone does not even start that download until your CSS has loaded. On the middle phone home page, fonts are 122 KB out of 2,559 KB, so they are almost never the main reason a site is slow.

What a web font actually costs

Nearly every site has one. The Web Almanac, published by HTTP Archive, found web fonts on 88% of sites in its 2025 fonts chapter. That chapter went up on January 15, 2026 and was updated on February 10, 2026.

The weight is small. The same year’s page weight chapter, published the same day and built from a crawl of the web in July 2025, puts the middle phone home page at 2,559 KB. Fonts are 122 KB of that. Images are 911 KB. The code running behind the page is another 632 KB.

So fonts are about 5% of the weight of a typical phone home page. Your jobsite photos are roughly seven times heavier.

The fonts chapter measures the files themselves. One font file in the middle of the pack runs in the mid 30s KB. At the 75th percentile it is in the mid 70s KB, and at the 90th around 115 KB. Four files at 40 KB each is 160 KB. That is real weight. It is not what is killing a slow page.

The trouble is when the font shows up

Timing hurts more than size.

Google’s web.dev guide, “Best practices for fonts,” says a font “is downloaded only if it’s referenced by styling that is used on the page.” It also says “the browser still must wait for all the CSS to be loaded, before it can discover if fonts are needed.”

Read that twice. The phone downloads your CSS, works out which text uses which font, and only then asks for the font file. That request goes out late, when someone is already staring at your page.

And what are they staring at? Possibly nothing. MDN Web Docs describes a “font block period” in which “any element attempting to use it must render an invisible fallback font face.” Your phone number is on the page. It is painted in invisible ink until the font arrives.

The one line that decides what a visitor sees

The setting is called font-display, and it lives inside the @font-face rule in your CSS. It is defined by the W3C in CSS Fonts Module Level 4, section 4.9. That draft gets republished often. The copy read for this article was a Working Draft dated August 18, 2026.

MDN Web Docs, last modified April 20, 2026, lays out what each value does:

  • block gives a short block period and an endless swap period. Your words stay invisible first.
  • swap gives an extremely small block period. A backup font shows almost at once, then the real one takes over.
  • fallback gives an extremely small block period and a short swap period.
  • optional gives an extremely small block period and no swap at all. If the font is not ready in time, that visit uses the backup font.
  • auto lets the browser decide.

Here is a limit worth knowing. MDN puts no number of seconds on “short” or “extremely small,” and notes that Firefox has its own settings controlling those lengths. The W3C draft does suggest numbers. It says “3s is recommended in most cases” for a short block period, and “100ms or less is recommended in most cases” for an extremely small one. It then adds that browsers “may use slightly different durations.” So the timing is a browser choice, not a fixed rule you can quote.

web.dev picks a favorite: “Use font-display: optional. This is the most ‘performant’ approach: text render is delayed for no longer than 100ms.” Worth knowing that page was last updated October 4, 2022.

Most of the web went the other way. The 2025 fonts chapter found swap on about 50% of pages, block on about 25%, auto on about 9%, fallback on about 5%, and optional on under 1%.

swap has its own price. The real font lands after the backup is already on screen, and the text can shift as it swaps. That is a separate headache, covered in why your page jumps.

How to make the fonts you keep cost less

  • One format. web.dev says “Use only WOFF2 and forget about everything else,” and that WOFF2 “compresses 30% better than WOFF.” The 2025 chapter puts it at about 65% of font file requests.
  • Fewer weights. Regular and bold cover most trade sites. Every extra weight and every italic is another file to fetch.
  • Serve them yourself. The 2025 chapter found 72% of sites serving at least one font file from their own address. Google Fonts still shows up on 54% of desktop sites and 47% of mobile ones.
  • Cut the characters you never use. The chapter calls subsetting “essential for those very large fonts, especially for CJK or icon fonts.” An English-only trade site needs a thin slice of a big font.
  • Drop icon fonts. web.dev says to replace them with SVGs when possible. Loading a whole font file to draw a wrench is a bad trade.
  • Go easy on preload. web.dev warns that preload “bypasses some of the browser’s built-in content negotiation strategies.” About 12.0% of desktop pages preload at least one font file.

When to leave your fonts alone

If your site is slow, do not start here. 122 KB against 2,559 KB. Working on fonts first means working on the smallest piece while the photos and the scripts sit untouched. Go in the order that actually helps.

Nobody should sell you a font cleanup as a standalone job on a site that has never had its images compressed, and a monthly retainer should list what was actually done.

Two more limits on everything above. The Web Almanac numbers describe millions of pages across the whole web, not roofers in your county, and your site may sit nowhere near the middle of that pile. And the web.dev guidance is close to four years old now, so read it as direction rather than gospel.

None of this is a ranking claim. Setting font-display changes what a visitor sees while the page loads. It will not move you up Google, and nothing here promises a call.

If your logo and your truck wrap use a typeface, keep it on the site. System fonts download nothing and appear instantly. They also look like every other site on the street.

What to do next

  1. Open your site in Chrome, right click, choose Inspect, open the Network tab, filter to Font, and reload. Count the files and add up the KB.
  2. Compare that total to the image total in the same panel. Whichever number is bigger is where your afternoon should go.
  3. If any font file does not end in .woff2, ask whoever runs the site to convert it.
  4. Search your CSS for @font-face. If there is no font-display line, add one. Use swap to keep your words visible, or optional to keep the page still.
  5. Delete the weights you do not use. Look at your own pages. If a light italic appears nowhere, stop shipping it.
  6. Run Google PageSpeed Insights, read the mobile tab, write down the score with today’s date, and change one thing at a time.

A site built plain, with two font files served from its own address and no outside requests when the page loads, starts from a better place than one dragging six files it never shows, though a plain site gives up a few things too. That is how these sites get built.

Written by Galloping