iomedia
insider
new at iomedia!
When fonts affect a website’s performance
As the project draws to a close, every optimisation has been carefully refined to ensure optimal performance. Then comes the moment to integrate the client’s final font...
The finding
A single change is enough to cause performance scores to drop significantly. This is an issue we regularly encounter in our clients’ projects.
In many cases, the fonts used are bespoke, chosen to reflect a brand identity. They are rarely optimised for the web and take longer to load.
When they are heavy, the text appears and then shifts. Lines shift, blocks adjust. This phenomenon, often subtle but problematic for performance analysis tools, is measured by CLS (Content Layout Shift), notably via Google Lighthouse.
The consequences are tangible:
- A degraded user experience
- Lower performance scores
The root of the problem
Even when best practices are followed, the browser must display a temporary font and then apply the final font once it has loaded.
This transition causes visual shifts, which are directly responsible for CLS.
Our approach
Rather than simply seeking to speed up loading, we chose to focus on perception.
The aim is simple: to avoid any visual disruption from the moment the page first loads. To achieve this, we ensure that the font displayed initially is already very close to the final rendering.
Implementation
This approach is based on several principles:
Hosting and managing fonts directly on the site, including Google or Adobe fonts, in order to maintain control
Use of system fonts as a fallback, without additional loading
Precise adjustment of the fallback font’s metrics (height, width, spacing) to make it visually similar to the final font.
Result
The content is displayed immediately, without any disruption, and the transition becomes imperceptible. This results in:
A significant reduction in CLS
Improved performance scores
A more stable and higher-quality user experience
Conclusion
These optimisations often go unnoticed, both by the user and the client. Yet it is these micro-adjustments that truly improve the perceived quality of a website.
For us, they are an integral part of our approach: working on these invisible details to ensure a seamless experience from the very first moments. It is these subtle optimisations that make all the difference.