To speed up font loading, load fewer font files, serve them in WOFF2 format, cut them down to the characters you use, and add font-display: swap so text appears right away. Preload only the one or two fonts you need at the top of the page. If speed matters most, use system fonts: they are already on the device, so there is nothing to download.
This article is only about fonts. If your whole site feels slow, start with our wider guide on a website loading slow on a fast connection, then come back here.
Why do web fonts slow a page down?
A web font is a file the browser must download before it can draw text in that typeface. The browser only finds out it needs the font after it reads your HTML and then your CSS. So the font request starts late, often after other files.
While the browser waits, it can do one of two things. It can hide the text (a "flash of invisible text") or show a fallback font and swap later (a "flash of unstyled text"). Hidden text makes the page feel slow. A late swap can make lines jump, which hurts Cumulative Layout Shift (CLS), one of Google's Core Web Vitals. Web.dev sets a good CLS score at 0.1 or less.
Common causes of slow fonts:
- too many families and weights (regular, bold, italic, light, each a separate file),
- old formats like TTF or OTF instead of WOFF2,
- full character sets when you only write in English,
- fonts from a third-party host with no early connection,
- icon fonts used for a few small icons.
How to speed up font loading, step by step
1. Use fewer fonts
Every weight and style is its own file. A design with two families in four weights each means eight downloads. Most blogs look fine with one family in regular and bold. Fake italics or a lighter colour can often replace an extra file. If your font offers a variable version, one file can hold many weights.
2. Serve WOFF2 only
WOFF2 is the most compact web font format. Web.dev says it compresses about 30% better than WOFF and that every current browser supports it. Its advice is blunt: use only WOFF2. You can drop the old TTF, EOT and SVG fallbacks from your @font-face rules.
3. Subset your fonts
A full font can hold thousands of characters for many languages. Subsetting removes the ones you do not need. Google Fonts does this for you by language. If you host fonts yourself, a subsetting tool can build a smaller Latin-only file, and the CSS unicode-range setting tells the browser which file covers which characters.
4. Set font-display
The font-display setting inside @font-face controls what the browser does while it waits. A typical rule looks like this:
@font-face { font-family: "MyFont"; src: url("/fonts/myfont.woff2") format("woff2"); font-display: swap; }
| Value | What happens | Good for |
|---|---|---|
| swap | Shows fallback text at once, swaps when the font arrives | Most blogs and body text |
| optional | Waits about 100 ms; if the font is late, keeps the fallback | Speed first, fewest layout shifts |
| block | Hides text for up to about 3 seconds | Rarely a good choice |
If you load Google Fonts, add &display=swap to the stylesheet URL to get the same effect.
5. Connect early to font hosts
For Google Fonts, add preconnect hints near the top of your <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
This lets the browser open the connection while it still reads your HTML.
6. Preload with care
Preload tells the browser to fetch a file right away:
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
The crossorigin part is required for fonts, even on your own domain. Web.dev warns that preload takes bandwidth away from other files, so use it for one or two fonts that show above the fold, not for every weight.
7. Reduce the layout jump
Pick a fallback font with similar width, or use the CSS size-adjust setting to match the fallback to your web font. Then the swap barely moves the text.
8. Replace icon fonts with SVG
An icon font downloads a whole font file for a handful of icons. Inline SVG icons are lighter and more accessible.
Should you self-host fonts or use Google Fonts?
Both can be fast. Self-hosting removes the extra connection to another domain and gives you full control. Web.dev notes it works best when you also have a CDN and HTTP/2. On a basic shared host without those, Google Fonts with preconnect and display=swap is often just as quick and less work.
The fastest font is the one you don't load
A system font stack uses the fonts already on the reader's device, such as Segoe UI on Windows or San Francisco on Apple devices. There is nothing to download, no swap and no layout shift:
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
For a text-heavy blog, this is a strong choice. Readers care more about your words than your typeface.
How to check the result
Run your page through PageSpeed Insights or Lighthouse in Chrome. Look for notes about font display and render-blocking files, and check the CLS and LCP numbers. Then open the Network tab, filter by "Font", and count the files. Fewer, smaller files mean you are on the right track. Our list of SEO tools has more checkers.
Keep it in proportion. Google says Core Web Vitals are used in ranking, but a good score does not guarantee top positions; relevance comes first. Taking an hour to speed up font loading is a quick win for readers. Do it once, then put your time back into content.
Frequently asked questions
Is font-display: swap always the best choice?
For most blogs, yes, because text shows at once. If your fallback and web font look very different, the swap can shift the layout. In that case, try optional or match the fallback size with size-adjust.
Do I still need WOFF or TTF files?
No. Every current browser supports WOFF2, and web.dev advises using only WOFF2. Removing old formats makes your CSS simpler without hurting real visitors.
How many fonts should a website use?
As few as possible. One family in two weights covers most blogs. Each extra weight or style is another file to download, so add one only when the design truly needs it.
