Web Font
A web font is a font file downloaded by the browser so a website can display typography that may not already exist on the user's device.
Web fonts provide design flexibility but also introduce additional network and rendering work.
What It Means in Practice
When a website specifies a custom typeface, the browser may need to download one or more font files before displaying text in that typeface.
Different:
- Font families
- Weights
- Styles
- Character sets
can require separate files.
A site using several families and many weights can therefore create a significant font payload.
How Fonts Affect Performance
Fonts can influence:
- Page weight
- Network requests
- Text rendering
- The critical rendering path
- Layout stability
- Perceived performance
If the final font has different dimensions from the fallback font, text may also shift when the custom font loads, contributing to Cumulative Layout Shift.
Why It Matters
Text is often the most important content on a page.
Font loading should therefore prioritize readability and content access rather than hiding text while waiting for a branded typeface.
Common Problems
Common problems include:
- Loading many unused font weights
- Large font files
- Loading complete character sets that are not needed
- Third-party font servers adding connection overhead
- Text remaining invisible while fonts load
- Poor fallback fonts causing noticeable layout shifts
- Preloading every font variant
How to Improve
Load only the families, styles, weights, and character sets the website actually uses.
Use appropriate font-display behaviour and choose fallback fonts that produce reasonably similar text dimensions.
Where practical, self-hosting fonts can provide greater control over caching and delivery.