Google Fonts is a library with over 1000 fonts that can be used on your website for free. It is managed by Google and served from the domain fonts.gstatic.com.
We Offer Website Speed Optimization Service!
Feel your website needs Page Speed Optimization? Do not panic. We will fix it for you. A fast-loading website to boost your website traffic, sales, and revenue..
To make your website look more professional, you can choose any of these free licensed fonts. However, using too many Google fonts can result in a multitude of external requests to Google’s servers, slowing down your website.
In this article, we will learn how to host Google fonts locally to fix eliminate render-blocking Resources & improve LCP.
Why should you host Google Fonts locally?
The main reason you would want to host Google Fonts locally is because of the loading speed. When hosted locally, the user’s browser does not have to travel back and forth from Google’s servers to retrieve the appropriate files.
You also have full control of the expiration time of the files. This, in turn, removes the Leverage Browser Caching notice on sites that measure performance metrics like GTMetrix, PageSpeed Insights, and Pingdom.
All this will make you load fewer HTTP requests and also rank higher in Google results pages (SERP) since speed is an SEO factor.
How to Host Google Fonts Locally in with OMGF Plugin
Before continuing with this method, make a backup copy of your website. Although we are not going to change or delete anything, just add files, I prefer to notify you for security. You can use a plugin like Updraft or do it by hand.
This method is easier if you don’t want to interfere with your theme’s code and other things.
This plugin allows you to search for the font you want to use on your website and automatically generates a stylesheet to add it to your theme code.
The OMGF (Optimize My Google Fonts) plugin was specifically written to increase performance and improve user experience.
So first Install and activate the OMGF Plugin. Once the plugin has been installed and activated, click Settings > Optimize Google Fonts.
Important Settings for OMGF
And now, by default you are in this tab Optimize Fonts. First of all, select Automatic instead of Manual (Default) in Optimization Mode:
And scroll down and click on Save and Optimize.
After a few moments later, OMGF automatically detects Google fonts on your website and will show you Google fonts optimization options.
Enable Preloading for all Google fonts as shown in the screenshot.
Now, all done!
Conclusion
When you host Google Fonts on your server, it gives your site many advantages. Of all these advantages, loading speed and optimization are the most important. Also, this will help you to fix the Render-blocking Resources issue and improve LCP (Largest contentful Paint).
I hope you have found this article useful and if you liked it, do not hesitate to share it on social networks. And if you have any questions, ask me in the comments.
