- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Performance issue using font
Dear All,
My client has created a website, developing a React application that incorporates Adobe Font. This application is being integrated into a webpage for the benefit of their customers.
Whenever we tried to use Adobe Font we got a performance issue using the Google speed test.
Is there any recommended setting for the fonts so that we don't get performance issues during the page load?
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Performance issue using font
Here are some recommendations for improving font performance in Magento when using Adobe Fonts to avoid page speed issues:
1. Limit the Number of Fonts - Only include font families/weights absolutely necessary for the desired design. Fewer custom fonts means fewer requests.
2. Set Optimal cache TTL for Font Files - Configure the browser cache expiry duration for Adobe Font files to 1 year using `.htaccess` rules. This prevents repeat downloading of static assets.
3. Preload Key Fonts - Use `<link rel="preload">` to prioritize loading of essential fonts that impact above-the-fold content first.
4. Enable GZIP Compression - GZIP compressing font file transfers can reduce transfer size by 50-70% making delivery faster over the wire.
5. Convert Fonts to WOFF2 - WOFF 2.0 Web Font format offers 30% better compression than formats like TTF/OTF. Use the WOFF2 versions fonts predominantly.
Additionally, utilizing a Magento optimized Managed Hosting provider is vital for the best page speed results. Their global CDN and fine-tuned server caching layers minimize origin requests to accelerate font delivery from locations nearest end-users. Expert configuration guarantees excellent performance for custom fonts.