Custom web fonts give your site a unique look, but every font file is an extra resource the browser must download before displaying text. Choosing and configuring them correctly can be the difference between a 1-second load and a 4-second one.
What Are Web Fonts?
A web font is a typography file that the browser downloads from a server — your own or an external one — to render the text on your page. Unlike system fonts (Arial, Times New Roman…), web fonts let you keep a consistent typographic identity across any device, without relying on what the user has installed.
The current standard uses the CSS @font-face rule, which tells the browser where to find the file and what name to give it within stylesheets.
Main Web Font Formats
The format determines both file weight and browser compatibility. Today only two really matter:
- WOFF2 — the modern recommended format. Built-in Brotli compression; 30–50 % lighter than TTF. Supported by all current browsers.
- WOFF — the previous version, also widely supported. Useful as a fallback for very old browsers.
- TTF / OTF — desktop files used on the web only if the provider doesn't offer WOFF2. Heavier.
- EOT / SVG — obsolete; only needed for IE6-8 and very old mobile Safari. You can safely ignore them.
Practical takeaway: always serve WOFF2 as the first choice and WOFF as a fallback.
Types of Web Fonts by Origin
External CDN Fonts (Google Fonts, Adobe Fonts…)
The most convenient option: add a <link> tag and the CDN serves the file. However, they require a connection to an external domain (DNS lookup + TCP handshake + TLS) that can add 100–300 ms depending on the user's location.
Google Fonts is free and covers almost any typographic need, but from a performance standpoint self-hosting fonts is always better.
Self-Hosted Fonts
You download the files and serve them from your own hosting or CDN. This eliminates the external connection and gives you full control over cache headers. It's the recommended practice for performance-focused sites.
Tools like google-webfonts-helper — or a quick audit from the elenlace.com team — let you download the subsets you need in WOFF2 format in minutes.
System Fonts
These use typefaces already installed on the device: system-ui, -apple-system, Segoe UI… No download required, so the performance impact is zero. The right choice for sites that prioritize absolute speed over brand identity.
How Web Fonts Affect Page Speed
Flash of Invisible Text (FOIT)
The browser waits for the font file to download before showing text. While waiting, content stays invisible. This directly hurts your Largest Contentful Paint (LCP) score and frustrates users.
Flash of Unstyled Text (FOUT)
With the CSS property font-display: swap, text appears immediately in a fallback font and switches to the web font once it's ready. It prevents FOIT but can cause a small visual shift that affects Cumulative Layout Shift (CLS).
Render Blocking
If the CSS file declaring the fonts loads in a render-blocking way, the browser can't paint anything until it's downloaded. Using preconnect for external CDNs and preload for the most critical font file reduces this delay significantly.
File Size
A full type family (multiple weights and styles) can easily add up to 500 KB. Loading only the subsets you use — for example, just Latin characters, just Regular and Bold — can cut that weight by 70 %.
| Practice | Speed Impact |
|---|---|
| External CDN without preconnect | +100–300 ms of extra latency |
| Self-hosted font in WOFF2 | 30–50 % file size reduction |
font-display: swap |
Eliminates FOIT; minimal CLS risk |
| Preload of critical font | LCP improved by up to 200 ms |
| Latin-only subset | File up to 70 % smaller |
Best Practices for Fast Web Fonts
- Self-host your fonts whenever possible to eliminate external domain connections.
- Use WOFF2 as the primary format.
- Limit weights and styles: only those that actually appear in the design.
- Add
font-display: swapto your@font-facedeclarations to avoid invisible text. - Use
<link rel="preload" as="font">for your body text font. - If you load Google Fonts from their CDN, add
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. - Generate subsets with only the characters you need (e.g., basic Latin for English-language sites).
If you need help auditing and optimizing your site's fonts, elenlace.com offers comprehensive web performance reviews. You can also browse more resources in our web performance article hub.
Key Takeaways
- Web fonts are typography files downloaded by the browser; their speed impact depends entirely on how they're served.
- WOFF2 is the optimal format — lighter thanks to built-in Brotli compression.
- Self-hosting fonts eliminates the extra latency of an external CDN connection.
font-display: swapprevents invisible text (FOIT) during loading.- Preloading the critical font and using only necessary subsets can shave hundreds of milliseconds off your LCP.
Wondering if your site's fonts are slowing down your business? Request a free performance audit from the elenlace.com team and find out exactly how fast your site can be.
FAQ
How many web fonts should I use on my site?
Ideally no more than two font families: one for headings and one for body text. Each additional family adds weight and connections, so fewer is always faster.
Does Google Fonts hurt my site's performance?
Yes, because it requires connecting to an external domain. The most efficient approach is to download the Google Fonts files and self-host them on your own server, eliminating the extra connection entirely.
What does font-display: swap do?
It tells the browser to display text immediately using a fallback font while it downloads the web font. This prevents "invisible text" and improves user experience during loading.
Do font formats affect SEO?
Indirectly, yes. A heavier format (TTF vs WOFF2) increases load time, which can hurt metrics like LCP that Google uses as a page experience signal. Optimizing fonts is therefore also a technical SEO practice.
Compare providers
Other providers and guides worth comparing:
