Typography is beautiful, but it's heavy. A single font file can be 200KB. If you load three weights (Regular, Bold, Italic), you are suddenly asking the user to download half a megabyte just to read your text.
If not optimized, this leads to FOIT (Flash of Invisible Text), where the user sees a blank screen while the font downloads.
Here is how to make your fonts fly.
1. Use font-display: swap
This is the single most important CSS property for font performance. It tells the browser: "Show the fallback system font immediately. Once the custom font downloads, swap it in."
The Code:
@font-face {
font-family: 'MyCoolFont';
src: url('mycoolfont.woff2') format('woff2');
font-display: swap; /* Add this line! */
}Result: No more invisible text. The user can read immediately.
2. Host Fonts Locally (Stop Using Google Fonts CDN)
For years, we were told to use Google's CDN. That advice is outdated. Modern browsers have "cache partitioning" for privacy, meaning a visitor who has cached 'Roboto' from another site will NOT share that cache with your site. They have to download it again.
Why Local is Better:
- Zero DNS Lookups: No need to connect to
fonts.googleapis.com. - Zero TLS Handshake: No need to negotiate security.
- Full Control: You rely only on your own server (or internal CDN).
How to do it:
Download the .woff2 files and upload them to your /fonts folder.
3. Preload Critical Fonts
If your main heading uses a custom font, you don't want the browser to discover it late in the CSS file. You can tell the browser to fetch it immediately in the <head>.
The Code:
<link rel="preload" href="/fonts/my-main-font.woff2" as="font" type="font/woff2" crossorigin>Note: Only preload 1 or 2 critical fonts (like your Body or Heading font). Preloading everything will clog your bandwidth.
4. Use WOFF2 Only
You don't need .ttf, .eot, or .svg font formats anymore. They are relics of the Internet Explorer era.
WOFF2 offers 30% better compression than WOFF. It is supported by every modern browser (98%+ global support).
Clean up your CSS:
/* ALL YOU NEED */
@font-face {
font-family: 'MyFont';
src: url('font.woff2') format('woff2');
}5. Subset Your Fonts (Latin Only)
Most font files contain thousands of characters for every language (Cyrillic, Greek, Vietnamese, etc.). If your site is only in English, you are downloading junk.
Subsetting removes these unused characters. You can reduce a font file from 200KB to 20KB just by keeping the "Latin Basic" set.
Tools to use: Font Squirrel Webfont Generator or Google Fonts Helper.
6. Variable Fonts: One File to Rule Them All
Instead of loading separate files for Regular, Bold, and Black, a Variable Font puts everything into a SINGLE file.
/* Old Way (3 requests) */
@font-face { src: url('robot-regular.woff2'); }
@font-face { src: url('robot-bold.woff2'); }
@font-face { src: url('robot-black.woff2'); }
/* New Way (1 request) */
@font-face {
font-family: 'Roboto Flex';
src: url('roboto-flex.woff2') format('woff2-variations');
}This drastically reduces the number of HTTP requests your browser has to make.
7. FOIT vs FOUT
- FOIT (Flash of Invisible Text): The user stares at whitespace while the font loads. This is terrible UX.
- FOUT (Flash of Unstyled Text): The user sees Arial (or a fallback) for 0.5s, then it snaps to your custom font.
Always aim for FOUT. It feels faster. This is exactly what font-display: swap achieves.
8. Don't Load Weights You Don't Use
Audit your CSS. Are you loading Italic 900 (Black Italic)? Do you actually use it?
If you only use 400 (Regular) and 700 (Bold), remove everything else from your @font-face declarations. Every unused weight is wasted bandwidth.
Summary
Fonts are a major part of your LCP (Largest Contentful Paint) score.
- Swap: Always use
font-display: swap. - Local: Host files yourself, skip the Google CDN.
- Preload: Prioritize your primary font.
- Format: Stick to WOFF2.
Your site will look just as good, but load twice as fast.