How to Optimise Web Fonts for Core Web Vitals

Want faster websites and better SEO rankings? Start by optimising your web fonts. Web fonts directly impact Google’s Core Web Vitals – metrics that measure your site’s loading speed, interactivity, and layout stability. Poor font choices can slow down your site and hurt your rankings.

Here’s what you need to know:

• Core Web Vitals Basics:
  • Largest Contentful Paint (LCP): Main content should load in ≤2.5 seconds.
  • First Input Delay (FID): Site should respond to user input in ≤100ms.
  • Cumulative Layout Shift (CLS): Keep layout shifts below 0.1.
• Font Optimisation Tips:
  • Use system fonts for instant loading or variable fonts for flexibility.
  • Compress fonts with WOFF2 for smaller file sizes.
  • Subset fonts to include only the characters you need, reducing file size by up to 90%.
  • Preload key fonts to speed up rendering.
  • Use the font-display: swap property to prevent text from disappearing during font loading.
• Quick Wins:
  • Switch to web-safe or system font stacks for better performance.
  • Cache fonts and use CDNs to reduce load times.
  • Limit font weights and styles to essentials (e.g., 400 and 700).

Bottom line: Optimising web fonts improves user experience, boosts SEO, and reduces bounce rates. Follow these steps to make your site faster and more stable.

Selecting Web Fonts for Performance

System Fonts vs Custom Fonts: Comparison

When deciding between system fonts and custom fonts, it’s important to balance performance needs with design goals. System fonts load instantly because they’re already installed on users’ devices, giving them a clear edge in performance. In fact, they can improve Largest Contentful Paint (LCP) by 300–500ms compared to custom fonts.

Font Type	Performance Impact	Design Flexibility	Loading Time
System Fonts	Minimal	Limited	Instant
Custom Fonts	Higher	Extensive	Adds 100–300ms
Variable Fonts	Moderate	High	30–50% faster than multiple custom fonts

If custom fonts are a must, choosing the right format is crucial. We’ll dive into this in the next section.

Web-Safe Fonts and Their Alternatives

Web-safe fonts are a dependable choice for maintaining performance while ensuring consistent display across devices. They keep performance overhead low and work well in designs focused on speed. Using system font stacks can also help ensure smooth fallback behavior across platforms.

Take The Guardian‘s website as an example. By switching their body text to a system font stack in February 2024, they boosted their LCP scores by 24%. This improvement significantly impacted their Core Web Vitals, proving how font decisions can directly influence SEO performance. Their optimised stack looked like this:

body { font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Fira Sans’, ‘Droid Sans’, ‘Helvetica Neue’, sans-serif; }

Font File Formats Explained

WOFF2 is the go-to format for modern web fonts, offering 97% browser support (as of 2024) and excellent compression. For best results, follow these steps:

• Use WOFF2 as your primary format.
• Provide WOFF as a fallback for older browsers.
• Apply font subsetting to reduce file sizes.

Variable fonts are another smart choice. They combine multiple styles into a single file, cutting payload sizes by up to 70% compared to traditional multi-file setups. This makes them a great option for balancing design flexibility with performance.

Are Your Web Fonts Affecting Your Core Web Vitals?

Strategies for Efficient Font Loading

Font loading has a direct impact on metrics like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) by influencing render-blocking and layout shifts.

Preloading Fonts for Faster Rendering

Preloading key fonts helps speed up rendering by prompting browsers to fetch font files earlier in the loading process. You can achieve this using the preload directive in HTML:

<link rel=”preload” href=”/fonts/my-font.woff2″ as=”font” type=”font/woff2″ crossorigin>

“Preloading fonts can shave hundreds of milliseconds off render times.”

This simple step ensures your fonts are ready when needed, improving the overall loading experience.

Leveraging the Font-Display CSS Property

The font-display property gives you control over how fonts behave while loading. Here’s how its values impact performance:

Value	Block Period	Swap Period
swap	None	Infinite
optional	100ms	None
fallback	100ms	3s
block	3s	Infinite

For better performance, use the font-display property in your @font-face declaration, like this:

@font-face {

font-family: ‘MyFont’;

src: url(‘myfont.woff2’) format(‘woff2’);

font-display: swap;

}

This approach ensures text remains readable even if custom fonts take time to load.

Minimising Flash of Unstyled or Faux Text

To avoid layout shifts caused by font loading delays, try these methods:

• Size-Adjusted System Fonts: Match fallback fonts as closely as possible to your custom fonts. Use properties like font-size-adjust and letter-spacing to refine the appearance:
• body {
  •   font-size-adjust: 0.5;
  •   letter-spacing: -0.02em;
• }

 

• Font Loading API: Use JavaScript to detect when fonts are fully loaded and adjust the page styling accordingly:
• document.fonts.ready.then(() => {
  • document.documentElement.classList.add(‘fonts-loaded’);
• });

These techniques help create a smoother visual experience, reducing disruptions during font loading.

Optimising Font Files for Performance

Once you’ve nailed down your font loading strategy, the next step is making sure those fonts load as quickly as possible. Optimising font files helps cut down load times and improves how efficiently fonts render on your site, which directly affects Core Web Vitals metrics.

Font Subsetting to Reduce File Size

Font subsetting is all about keeping only the characters your website actually needs. This method can shrink font file sizes by as much as 90%, making a huge difference in performance.

/* Example of loading a subset Latin font */

@font-face {

font-family: ‘OptimizedFont’;

src: url(‘optimized-font-latin.woff2’) format(‘woff2’);

unicode-range: U+0000-00FF;

}

Tools like glyphhanger can automate subsetting by scanning your site’s content and identifying the necessary characters. Once you’ve streamlined the character set, you can apply modern compression formats to further reduce the file size.

Compressing Fonts for Faster Delivery

To make fonts load even faster, compress them using the most efficient formats. Here’s a quick breakdown:

Format	Compression Level	Size Reduction	Browser Support
WOFF2	Highest	~30% smaller than WOFF	98%
WOFF	Moderate	~15-20% smaller than TTF	98%
TTF	Basic	No compression	100%

• Convert fonts to WOFF2 for the best file size reduction.
• Use Brotli compression to squeeze out an extra 15-20% reduction.
• When WOFF2 isn’t an option, create optimised WOFF files with zopfli.

Limiting Font Variations

The more font weights and styles you include, the heavier the load on your site. Stick to the essentials: 400 (regular) and 700 (bold) weights are usually enough unless italics are absolutely necessary.

For even better performance, consider using variable fonts. They allow for a wide range of styling options while keeping file sizes smaller and loading times shorter.

Using Browser Caching and CDNs for Font Delivery

Improving font delivery with caching and CDNs can significantly enhance Core Web Vitals by cutting down load times and reducing network delays. These methods work hand-in-hand with preloading techniques discussed earlier in Section 3.

Setting Cache Headers for Fonts

Caching helps minimise repeated server requests, reducing them by 20-30% for returning visitors. Using the immutable directive ensures browsers skip unnecessary revalidation while still allowing updates when required.

Why Content Delivery Networks Matter

CDNs speed up font delivery by distributing files across servers worldwide, cutting delivery times by up to 50% (Cloudflare 2023). Adding preconnect hints can shave 100-300ms off connection setup time:

<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>

<link rel=”dns-prefetch” href=”https://fonts.gstatic.com”>

CDNs also enhance the benefits of WOFF2 compression and font subsetting. However, deciding between self-hosting and relying on third-party services requires careful planning.

Self-Hosting vs Third-Party Hosting of Fonts

The choice between self-hosting and third-party hosting impacts several performance aspects:

Factor	Self-Hosting	Third-Party Hosting
Performance Control	Full control over optimization	Dependent on the provider
Maintenance	Requires regular updates	Managed by the service provider
Cost	Higher initial setup cost	Often free, with paid options

These strategies, combined with earlier file-level improvements, create a well-rounded approach to optimising font performance.

Conclusion and Next Steps

Key Points to Keep in Mind

Optimising web fonts plays a critical role in improving Core Web Vitals metrics and overall site performance. For example, a major e-commerce platform boosted its Largest Contentful Paint (LCP) by 30% simply by converting to WOFF2 and subsetting fonts (2024 case study). Similarly, an enterprise SaaS platform achieved 40% faster font loading using a combination of subsetting and CDN delivery.

“Optimising web fonts is not just about performance; it’s about creating a better user experience that translates into improved conversion rates and lower bounce rates.”

These methods are most effective when paired with strategies like font loading prioritisation and file size reduction, as outlined earlier. According to Google (2023), websites that optimise their fonts can see up to a 24% drop in visitor bounce rates.

When to Consider Professional Assistance

Aligning font optimisation with Google’s Core Web Vitals can deliver strong results, but it often requires a professional touch. Companies like E-Web Marketing offer specialised website optimisation services, including font performance improvements as part of a broader SEO strategy. Their approach combines technical know-how with data analysis to deliver measurable outcomes.

E-Web Marketing’s audits focus on identifying render-blocking fonts and improving delivery through techniques like variable fonts and optimised cache headers. This process ensures businesses maintain excellent Core Web Vitals scores while preserving their brand’s visual identity.

To get started, conduct a font audit to identify the largest files and unnecessary variants. Use tools like PageSpeed Insights to regularly monitor Core Web Vitals and make adjustments as needed based on performance metrics.

FAQs

How to optimise a font file?

Here are some effective ways to make your font files more efficient:

• Use modern compression formats: Formats like WOFF2 can shrink file sizes by as much as 30% compared to older WOFF formats. This leverages advanced compression techniques for better performance.
• Font subsetting: Tools like Glyphhanger can trim fonts to include only the characters you need, such as Latin-only sets, reducing file sizes by up to 90%. Pairing subsetting with compression ensures maximum efficiency.
• Caching: Set up service workers and proper cache headers for better load times. A well-implemented caching strategy can cut load times by up to 70%. Below is an example of how to configure caching on an Apache server:

<FilesMatch “\.(woff2?|eot|ttf|otf)$”>

Header set Cache-Control “max-age=31536000, public”

</FilesMatch>

Finally, use auditing tools to monitor your progress and pinpoint further improvements. If the process feels overwhelming, services like E-Web Marketing can handle advanced optimisations while keeping your brand intact.