Web Fonts and Website Speed: How to Use Custom Fonts Without Slowing Down

A custom font is one of the easiest ways to make a website feel unique. It is also one of the easiest ways to slow it down if you are careless. The good news is that a few simple habits keep web fonts fast enough that visitors and Google never notice them.

Why fonts affect speed and SEO

Before a browser can show text in your custom font, it has to download the font file. Large files, too many weights or badly loaded fonts can delay text, cause layout shifts and hurt Core Web Vitals such as Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). Those metrics are part of how Google evaluates page experience.

1. Use WOFF2

WOFF2 is the most compressed web font format and is supported by every modern browser. If your font download includes WOFF2, as many of ours do (for example iBrand and Squid Boy), use it and skip OTF or TTF on the web. Our font format guide explains the differences.

2. Load fewer weights

Every weight and style is a separate download. Most sites only need two or three: regular, bold, and maybe one display weight for headings. Audit your CSS and remove weights you never use. If you need lots of weights, a variable font like Grift can replace several files with one; see variable fonts explained.

3. Add font-display: swap

@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

font-display: swap shows text immediately in a fallback font, then swaps to your font when it arrives. Visitors can start reading straight away instead of staring at invisible text.

4. Preload the one font that matters most

If a heading font appears at the top of every page, preloading it helps it arrive sooner:

<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>

Preload only one or two critical files. Preloading everything defeats the purpose.

5. Choose a similar fallback font

When the swap happens, a big change in letter width makes the page jump. Pick a fallback with similar proportions, for example a system sans for a sans serif brand font, and keep line heights consistent. That keeps layout shifts small.

6. Host fonts on your own site

Self-hosting your font files avoids extra connections to third-party servers and gives you full control over caching. Set long cache times for font files so returning visitors never download them twice.

7. Subset if you only need some characters

Large families can include hundreds of glyphs for many languages. If your site is only in English, a subset containing just the characters you need can be much smaller. Check that your licence allows modifying or subsetting the font files before you do this.

Quick checklist

• WOFF2 only
• Two or three weights at most
• font-display: swap on every @font-face
• Preload the main heading font
• Similar fallback font
• Self-hosted, long cache headers

Platform guides

How to check your font performance

Run your page through PageSpeed Insights or Lighthouse. Look for warnings like "Ensure text remains visible during webfont load" (fixed by font-display: swap) and check the network list to see how many font files load and how large they are. A well-optimised site usually loads two to four small WOFF2 files.

Ready to add a font to your site? Follow our step-by-step guides for Shopify and WordPress and Elementor, then pick a web-ready font from our font collection.