Web fonts without the performance tax

Typography is one of the strongest expressions of a brand online, and designers are right to care about it. It is also one of the most common sources of avoidable performance problems. We regularly audit sites loading eight or ten font files on every page: several weights of a display face, a text face with italics, and an icon font nobody remembers adding. Each file competes with the hero image and critical CSS for early bandwidth, and poorly handled font loading causes invisible text or layout shift. Good font performance is not about giving up on typography. It is about being deliberate.

Start with the design decision

The most effective font optimization happens in the design file, not in the code. Before any technical work, we review how typography is actually used across templates.

• How many families? Two is usually plenty: one for headings, one for body text. Sometimes one family with a good range is enough.
• How many weights? Designs often specify five weights, but a real audit of the pages tends to show three doing all the work. Merging similar weights is rarely noticed by anyone but the designer.
• Are italics needed? If italic body text appears only in the odd testimonial, a synthesized italic or the regular weight may be acceptable.
• Is a system font viable for body text? Modern system font stacks are well designed, and using one for body copy removes the largest font file entirely.

On a recent design system engagement, we reduced a brand's typography from nine font files to three with no visible change on any key template. Font bytes on first load fell by about 70 percent.

Every weight in the style guide is a file someone has to download. Choose them the way you would choose the images on the homepage.

Make each file as small as it can be

Once the set is agreed, we reduce each file.

1. Use WOFF2 only. It is supported by every browser worth supporting and compresses significantly better than older formats.
2. Subset to the characters you need. A font covering Latin, Cyrillic, Greek and Vietnamese might be several times larger than a Latin-only subset. Use unicode-range to split subsets so other scripts load only when a page contains them.
3. Consider variable fonts. A single variable font file can replace several static weights. It is only a win if you use three or more weights; for one or two, static files are often smaller.
4. Remove unused features. OpenType features such as alternate glyph sets and extensive ligatures add size. Keep the ones the design relies on.

Self-hosting fonts on the same domain as the site usually helps too. It removes an extra connection to a third-party font service and lets the fonts share the site's caching and CDN configuration. Check the font license before doing so; most commercial licenses allow it for web use.

Load fonts in the right order

Browsers only discover font files when they find text that needs them, which is often late. We control that with a few techniques.

• Preload the one or two critical files, usually the body regular weight and the heading weight used above the fold. Preloading more than that competes with the LCP image.
• Choose font-display intentionally. swap shows fallback text immediately and replaces it when the font arrives, which is best for body text. optional uses the web font only if it arrives very quickly, avoiding any swap at all, which suits secondary fonts.
• Inline the @font-face rules in the document head rather than in a late-loading stylesheet, so the browser knows about the fonts early.

<link rel="preload" href="/fonts/brand-sans-600.woff2" as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: "Brand Sans";
    src: url("/fonts/brand-sans-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
  }
</style>

Fallbacks that do not shift the layout

With font-display: swap, text first renders in a fallback font and then swaps to the web font. If the two fonts have different widths and line heights, headings wrap differently and paragraphs change height, which causes layout shift and sometimes changes the LCP element. The fix is a metric-matched fallback: a local system font adjusted with size-adjust, ascent-override, descent-override and line-gap-override so it occupies almost exactly the same space.

Several tools generate these values automatically from the web font's metrics. Once in place, the swap becomes nearly invisible. On one editorial site, adding metric overrides for the heading font removed the largest single source of layout shift on article pages.

Icon fonts deserve a special note. We replace them with inline SVG icons wherever we find them. Icon fonts block rendering of the icons until the whole font loads, are poor for accessibility, and usually include hundreds of glyphs for a site that uses twenty.

Keeping it tidy

Font sprawl tends to return. A campaign introduces a new display face, or a developer adds a weight for one component. We guard against that by documenting the approved font files in the design system, adding a font byte budget to performance checks in CI, and reviewing font requests in the network panel as part of every release checklist.

Font strategy sits where design and engineering meet, so it features in both our design systems work and our Core Web Vitals optimization projects. For WordPress sites with fonts loaded by themes and plugins, it is part of WordPress speed optimization.

Keep your typography, lose the delay

If your brand fonts are slowing the site down, we can audit and rework them without changing how the site looks. Get a fixed-price quote, delivered within 24 hours.