Web fonts play a crucial role in the visual appearance of websites, but they can also contribute to slower page loading times if not managed efficiently.
Cloudflare Font Optimization is designed to improve the loading times of web pages by optimizing the delivery of fonts.
Here are some common questions about Cloudflare Font Optimization.
Please note: This feature is only available for WordPress Speed Optimization and Maintenance Service customers.
Which type of fonts are optimized by Cloudflare?
Currently, Cloudflare only optimizes Google Fonts. So, if you are loading fonts via some other sources then they won’t be optimized by Cloudflare.
What are the prerequisites for Cloudflare font optimization to work?
Cloudflare will only be able to optimize your web fonts under the following circumstances:
Cloudflare will only optimize Google Fonts, other fonts won’t be optimized
For Cloudflare to optimize your Google Fonts, you need to ensure that you are loading the Google Fonts directly from Google in your HTML using the default “link” attribute. Example:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
If you are using some plugin to cache and serve Google Fonts from local disk cache - then Cloudflare won’t be able to optimize those fonts.
If you are using some JavaScript Library to load Google Fonts dynamically in your webpage then Cloudflare won’t be able to perform any font optimizations.
If you are loading the Google Fonts directly in your CSS file using the
@importstatement then Cloudflare won’t be able to perform any font optimizations.
Despite loading Google Fonts properly, why is Cloudflare not optimizing them?
The common reason behind this behavior is that the Google Font you are using on your website has not yet been indexed by Cloudflare. Cloudflare runs periodic cron jobs to index Google Fonts in Cloudflare global CDN.
If the font you are trying to load on your webpage is already indexed by Cloudflare, then Cloudflare will perform its optimizations and serve the Google Fonts directly from the global CDN, otherwise, it will fallback to using the default Google Font loading mechanism.
So, if you are using a Google Font that has recently been added to the Google Fonts library, it might take some time for Cloudflare to index that new font, and after that, you will see Cloudflare Fonts performing its optimizations.
Alternatively, if you have added a Google Font on your site which is not new, but you are using a font-weight that has recently been added to Google Font, then Cloudflare Fonts will not work immediately until that new font weight has been indexed by Cloudflare.
Can I disable Cloudflare Font optimization on my website?
Unfortunately, this facility is not currently available. We are working closely with Cloudflare to make this a reality soon. For now, Cloudflare Font optimization is enabled for all of our WordPress Speed Optimization and Maintenance Service customers
What’s the benefit of using Cloudflare Font optimization?
Generally, when you load Google Fonts on your website, at the time of web page load, the web browser has to make the following requests to load the Google Fonts:
Make a request to the Google Fonts server to fetch the CSS file
Process the CSS file and then make an additional request to the Google Font server to download the actual font files
Process the font files and apply it to the webpage
This whole chain of processes can slow down your webpage, increase LCP, and lead to a bad user experience. When Cloudflare Fonts optimization is enabled it will do the following:
Remove the Google Fonts CSS file and instead inline the fonts CSS inside the HTML head. Ensuring the browser doesn't have to make additional HTTP requests to fetch the fonts CSS files.
All Google Font files will be replaced with a copy of the same file that is being served from the Cloudflare Global CDN network. Ensuring the lowest TTFB and fastest load of the web fonts.
Browsers just have to make one HTTP request to fetch the font files from the local CDN edge - making web fonts load at a super fast speed.
With Cloudflare Font optimization, the web fonts load rapidly reducing LCP coming from fonts and improving your website user experience.
If you have any further questions, feel free to submit a support ticket and we will be happy to help you!