Hello all,
the font of website is only loading with layout shifts. Is there a way to improve this?
Thanks in advance,
Samuel
the issue is with size of variable fonts as their original size is 3.7MB!!!. compressed 1.92MB!!! It is huge size to fetch these
You should look for:
- solution how to speed up variable fonts (on internet or this forum)
- avoid variable fonts and download only fonts you need. ideally 3-4 types (for: headings, copy , italic) will generally cover all you need. you can also add other family and its types …
Hello @Samuel1993 , Thanks for your question. Font-related layout shifts happen because browsers wait for custom fonts to load before rendering text, causing visible jumps when fonts swap in.
Here are some advanced techniques to improve the font slow loading:
Consider system fonts for key text
- Using system fonts like system-ui or -apple-system avoids loading delays and eliminates layout shifts:
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
}
Test your website with Google PageSpeed Insights again after changes
Alternatively, if you’d prefer to streamline the optimization process, Website Speedy app—a Webflow app that automates optimizing slow load, CLS, and CSS minification to improve the site’s performance score or speed.
(Disclaimer: We are the developers of this app and are happy to answer any questions.)
@Samuel1993 Fonts Optimization Tips
Fonts can significantly affect your website’s load time. Follow these best practices to enhance performance:
- Host Fonts Locally: Avoid using external services like Google Fonts or Adobe Fonts via embed codes. Instead, download and host fonts directly on your server.
- Use
font-display: swap: Ensures text remains visible during font loading, preventing the Flash of Invisible Text (FOIT). - Limit Font Variations: Stick to one or two fonts with minimal weights/styles to reduce load time.
- Preload Critical Fonts: Add preload tags in the
<head>section of your HTML for fonts used above the fold. - Trim Unused Unicode Characters: Use FontForge to remove unnecessary character sets and reduce file size.