Google Fonts also affect your WordPress website speed & you may have got these errors In Pingdom & Gtmetrix speed test.
We can’t optimize external resources and scripts like Google Fonts. So, the best way to fix this error is to host Google Fonts locally which will improve your WordPress website speed.
WP Rocket plugin has a built-in feature to load your Google Fonts locally. But if you are looking for a free alternative then You can use the OMGF plugin & in this post, I have the complete step-by-step guide on how to host Google Fonts locally in WordPress.
Table of Contents
What Is Google Fonts?
Google Fonts is a library of 999+ free fonts that we can use on our website. Almost all the WordPress theme developers add Google fonts in their theme & we can use any font that we like to give our website or blog a professional look.
The best part of Google fonts is that we don’t need any license to use these fonts.
I will recommend using only one font on your website or blog. If you use more than one font then it will slow down your website.
Note: Please take a backup of your site before making any changes. You can use Updraft plus plugin.
How to host Google Fonts locally in WordPress using a plugin?
Plugins make our work a little bit easier to optimize anything. You can also do the same task using coding but most people prefer using a plugin so in the post I have shared how you can host Google Fonts locally using plugins. This plugin also works perfectly with a popular page builder like Elementor.
Install OMGF Plugin
With the OMGF plugin, you can easily host your Google fonts locally. Just install & activate this plugin.
Steps:
- Go to the settings > Optimize Google Fonts.
- Under Generate Stylesheet you can either search your fonts or you can click on the Autodetect button.
Note: Sometimes the Auto Detect doesn’t show any fonts so in that case open your website home page or any other page in a new tab. Once the page loads completely come back to the plugin setting page & refresh the page. Now you can click on the Auto Detect button & it will show the fonts you have used along with the font-weight.
- Select your fonts & check the font weight that you are using on your website or blog. if you are not using any font weight then you can remove that. In most cases you don’t need Latin-ext fonts, so you can uncheck that box. You can even Preload your fonts but I will suggest choosing only the header font-weight.
- Now, click the Download Fonts button.
- Once the fonts get downloaded, click the Generate Stylesheet button which will host your Google fonts locally.
Advanced Settings:
Auto Remove: Check this option as it will remove any requests made to externally hosted Google Fonts stylesheets.
Font-Display Option: Choose Swap. When your web page starts loading, it will show the system font & once your fonts get downloaded, it will Swap them.
Save Fonts Files To: Leave as it is.
Serve Font Files From: Leave as it is.
Force SSL: If the OMGF font URL is non-SSL then you can check this box. Otherwise, leave it as it is.
Use Relative URLs: Uncheck this option.
Serve Fonts From CDN: If you are using any CDN then you can add your CDN URL here.
Use Web Font Loader: Uncheck this option
Remove Version Parameter: Check this option as it will remove the ?ver=x.x.x parameter from the Stylesheet.
Also, Check out my post on how to host Google Analytics locally. Hosting Google Analytics code locally will also improve your WordPress website speed.
Optimize More:
You can also watch my video, where I have covered almost everything on how to speed up WordPress website 2022 for free with timestamps in the video description.
Or You can check out our blog post – 25 Ways to Speed Up Your WordPress Website.
FAQs:
How To Speed Up Google Fonts In WordPress?
The best way to speed up Google Fonts in WordPress is by hosting it locally. You can use the OMGF plugin.
Do Google Fonts Slow Down Website?
Yes, Google fonts slow down your website. To improve your website speed, you can host your Google fonts locally.
How Do I Optimize Fonts In WordPress?
You can optimize fonts in WordPress by hosting them locally.
How to Host Google Fonts Locally In Elementor?
You can use the OMGF plugin or WP Rocket plugin to host your Google Fonts locally in Elementor.
Conclusion:
Hosting your Google Fonts locally is a great idea to improve your WordPress website loading time. Try this plugin and share your GTmetrix score in the comments.
If you have any queries then, feel free to comment below.
A2 Hosting
Starting At $2.99/month
