How can I optimize the speed of my website with large fonts?

Technical Q&A

Topic summary

A Shopify store owner is experiencing slow Largest Contentful Paint (LCP) performance due to fonts with an unusually large 16 MB file size. Two screenshots were shared showing the performance metrics.

Primary Solutions Recommended:

  • Font subsetting: Extract only the specific characters needed from the font, which can dramatically reduce file size
  • Font compression: Use WOFF2 format for better compression while maintaining quality
  • Alternative fonts: Consider lighter-weight versions or web-optimized fonts from services like Google Fonts
  • Font delivery optimization: Implement CDN hosting for fonts and use preload directives for critical fonts

Additional Context:

One respondent noted that 15 MB is abnormally large for a font file, suggesting the font may contain excessive characters or possibly icons rather than standard text characters. The discussion also touched on broader Shopify performance challenges related to third-party apps that aren’t externally hosted.

Supplementary optimization strategies mentioned include image compression, code minification, and browser caching. The issue remains unresolved with the original poster seeking further guidance.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I’m reaching out for some guidance on optimizing the speed of my Shopify store.

Currently, we’re encountering a significant issue with our website’s Largest Contentful Paint (LCP), primarily due to the size of our fonts. These fonts have a file size of around 16 MB, which is causing considerable slowdowns for visitors.

I would greatly appreciate any insights or suggestions you might have regarding how to effectively reduce the file size of these fonts or any other strategies for improving our website’s speed.

Thank you in advance for your help and expertise!

image_2024_04_15T10_05_45_039Z.png
image_2024_04_15T10_05_45_039Z.png1611×420 68.7 KB

image_2024_04_15T10_24_37_567Z.png
image_2024_04_15T10_24_37_567Z.png1177×477 28.5 KB

2

Hello @Huptech-Web ,

The large font size (16MB) is definitely impacting your website’s LCP. Here are two approaches to tackle this issue:

1. Reduce Font File Size:

  • Font Subsetting: This involves using only the specific characters your website needs from the font. This can significantly reduce file size without affecting the look of your website. There are online tools and plugins available for font subsetting.
  • Font Compression Techniques: Techniques like WOFF2 compression can significantly reduce font file size without compromising quality. Most modern browsers support WOFF2.
  • Consider Alternative Fonts: Explore using lighter weight versions of your current fonts or choose web fonts specifically designed for faster loading. Sites like Google Fonts offer free fonts optimized for web use.

2. Optimize Font Delivery:

  • Font Hosting Services: Consider using a Content Delivery Network (CDN) specifically designed for fonts. These services store your fonts on servers around the globe, ensuring faster delivery to visitors regardless of location.
  • Preload Crucial Fonts: Use preload directives in your website’s code to prioritize the loading of critical fonts used for your LCP content.

Additional Strategies for Website Speed:

  • Image Optimization: Large image files can also contribute to slow loading times. Resize images to appropriate dimensions and use compression techniques to reduce file size without sacrificing quality.
  • Minify Code: Minifying HTML, CSS, and JavaScript code can remove unnecessary characters and whitespace, leading to faster loading times.
  • Browser Caching: Enable browser caching to allow visitors’ browsers to store frequently accessed files locally, reducing the need to download them again on subsequent visits.
    If you’re using a Shopify theme, some themes may have options within the theme editor to manage font size and delivery.
3

So yeah, like the mostly copy and pasted answer mentioned, font subsetting is probably your only hope if you want to keep that font, but reduce the file size.

That the font size is 15mb, means there is something seriously wrong with that font, like, whats up with those characters, how many characters are being used? Are they icons by any chance?

4

  1. find a similar looking font that is smaller

  2. when you embed the font, use only some of the “styles” (for example thin, extra bold) dont use all

  3. preload the font

if you need other optimizations, we made a guide https://onescales.com/blogs/main/shopify-speed-optimization

5

It’s one of a million other issues and problems with Shopify that never gets fixed.

To get the features you need to run the shop properly, you have to rely on third-party apps. Some who are very large files and should be hosted OUTSIDE your shop so it doesn’t eat into your space and memory, but they’re not and eat up the loading speed of the store…

If the issue is only your own files being too large, you simply have to minimize them. But, some of these issue are beyond shop owners control.