Most Websites have the “Eliminate render-blocking Resources” issue. And Google fonts can be the reason for this reason. Optimizing Google fonts to fix eliminate render-blocking Resources in WordPress is a way to Speed up your WordPress website.
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..
Because speed is everything. If your site uses web fonts, controlling how they load can be very important to improve the performance perceived by your users.
In this article, we are going to learn how to Optimize Google Fonts to fix the eliminate render-blocking Resources issue.
Let’s learn…
What are Google Fonts?
Google Fonts is a catalog with more than 700 totally free and open-source fonts. This means that you can use any font from the extensive Google catalog on your website or blog.
This is a great advance given the versatility it offers us in terms of web page design. Previously, only a few fonts could be used in web design, the so-called “safe fonts” (Times New Roman, Arial, Andale mono …). If these fonts were used, there was a risk that the browser would not display them correctly.
Before having this possibility, many designers who wanted to use other fonts put them as an image. This is not the best for positioning and luckily today it is not necessary.
Optimize Google Fonts to Fix Eliminate render-blocking Resources issue
We learn several methods to Optimize Google Fonts for better Website Speed.
1. DNS Preload and Prefetch Google Fonts
We can do a slight optimization of the Google Fonts load with the preload and the DNS prefetch, two functionalities that we can do incompatible browsers as long as we indicate it in the code.
The first thing we must do is identify the requests to Google Fonts with Pagespeed Insights, Pingdom Tools or any other tool. After detecting these requests, we must copy the URLs and we will use them for both the preload and the DNS prefetch.
We have several ways of doing it, on the one hand, we can do it manually, and on the other automatic.
We can do it with the rel DNS-prefetch and preconnect, these codes or tags must go in between the <head> tags of the website:
<link rel="DNS-prefetch" href="//fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.googleapis.com"/>It will not be difficult for you to put them in a child theme or with a theme configuration that allows you to enter code in the header easily since it is the same mechanism as when we install verify a site on Google Search Console.
The visitor’s web browser must be compatible with these functionalities to use them.
But if we don’t know where to insert these lines and we don’t want to get involved, some plugins allow us to play with the DNS prefetch ( DNS cache ) and with the preconnect.
We can use plugins such as WP Rocket, Litespeed that we are mentioned below.
2. Types of Fonts and Browser Support
To optimize the loading of Google Fonts, we are going to explain a little theory about fonts in web environments.
We are going to distinguish 4 font formats that differ in some of their characteristics:
- EOT: It is a format developed by Microsoft and is only used in Microsoft browsers, so it has very little compatibility.
- TTF: It is a format created in 1980 and that was expanding. It is currently the most compatible with WOFF.
- WOFF: It is a format created in 2009 that incorporates native compression to reduce the size of the fonts. It is currently the most compatible with TTF.
- WOFF2: It is an evolution of WOFF with an improvement of 30% in the size of the font files and that little by little is being compatible with the new versions of most web browsers, except Internet Explorer.
Not all formats are compatible with all web browsers, for that reason, standard alternative fonts are usually proposed that will be loaded if the main ones fail.
I think this table can help you discern the compatibilities and although it is somewhat outdated in browsers like Safari, it serves as an example:
Typically Arial or Verdana, even Trebuchet MS or Tahoma are used as fallback fonts.
But for you to keep in mind, 86% of the browsers currently used are compatible with the WOFF format.
3. Load Google Fonts Locally
What does it mean to load Google Fonts from local? Well, simple, download the Google Fonts files to the server or web hosting and upload the font files directly from the hosting or server, that is, without making requests to the Google servers.
Steps to use Google fonts from your server:
1. Download the fonts from Google Fonts
Go to https://fonts.google.com and choose the fonts to use. Add Google Font that you want to use. Remember to choose only the modalities that you really need, thus minimizing the load of the web.
2. Convert Google Fonts from TTF to WOFF2
The fonts that you download from Google Fonts are in TTF format, but to display them on the web it is recommended that they be in WOFF2 format.
WOFF2 an evolution of WOFF (Web Open Font Format) that represents a 30% improvement in the size of font files and is compatible with 94% of browsers.
To do this, you can use any of the online tools that allow you to do so. For example:
Convert and download the font file.
Let’s keep going.
3. Create a folder and Upload the fonts file
You already have the proper version of your fonts. To upload Font files:
- Go to cPanel or FTP.
- And open wp-content/uploads
- Create a a “fonts” folder and uploaded them there (to separate font file from other files).
4. Add Font CSS
Next, we will add the font CSS you got inside the downloaded zip font file named stylesheet.css. This is the CSS code that will connect your fonts with your existing CSS and make them ready to use.
Default URLs in stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');Change these to:
src: url('https://yourwebsite.com/wp-content/uploads/fonts/
Roboto-Regular.woff2') format('woff2'),
url('https://yourwebsite.com/wp-content/uploads/fonts/
Roboto-Regular.woff') format('woff');You have to use your our folder URL before the font filename.
From now on the fonts will be loaded directly from your server instead of Google’s servers.
With this we managed to kill four birds with one stone:
- On the one hand, the requests will be made to our hosting, so we will have control of the requests and it will be up to us (or at least we can do something) if the load is slow.
- On the other hand, when downloading the Google Fonts font files to our server, we can customize them, applying techniques such as combining all the fonts in a single file and therefore a single request.
- We can specify the browser cache (browser caching) of the Google Fonts files, in case of staying on Google’s servers we could not.
- When the sources are hosted locally, we can apply GZIP compression to lower their weight when serving them to visitors.
For our visual content lovers, I gonna leave a youtube video with the help of you can load google fonts locally:
4. Less Use of Font Families
The more font families you use, the more weight your page will have.
A single google font family can increase page weight by 300-400kb. So I recommended you use fewer font families. I suggest you use no more than 2 font families, one for headings and the second for the body font.
With only 1 or 2 font families you can make your website pretty attractive, there is no issue.
Best Plugins to Optimize Google Fonts
If you don’t want to Optimize Google Fonts manually, want to do with some Plugins. This section for you.
Let’s take a look into some best WordPress plugins to Optimize Google Fonts to fix Eliminate render-blocking Resources issue.
1. Core Web Vitals & PageSpeed Booster
Core Web Vitals & PageSpeed Booster is a WordPress plugin to improve website speed performance and core web vitals score.
This plugin also has a feature to optimize google fonts, it will automatically host google fonts locally:
2. OMGF
One of the plugins that can help you optimize the loading of Google Fonts in WordPress is OMGF (Optimize My Google Fonts), both in the free version and in the paid version.
Although the free version of OMGF is somewhat limited, it is perfectly usable and has quite a few functionalities.
let’s learn How to configure OMGF:
- Go to Settings ➔ Optimize Google Fonts.
- Now you are in Optimize Fonts section. Now follow these options same.
- Optimization Mode ➔ Automatic
- Font Display Option ➔ Swap (Recommend).
- Tick WOFF2 Only Loading if you are using WOFF2 fonts (pro)
- And click on Save Changes.
Conclusion
As you have seen throughout the post, optimizing the sources of your website will mean a significant improvement in terms of the performance of your website on the internet. Thus you can optimize Google fonts to fix Eliminate Render Blocking issues.
Therefore, I would not miss this opportunity to optimize every inch of my web page since as you know, since Google released its Core Web Vital it is clear that the path that Google is currently choosing is to create Super fast web pages that load as few items as possible.
Therefore, do not forget to optimize whenever you launch a web project since, as you have seen, it is not too complex and can be one more extra for your web page.
Is your website’s Pagespeed Insights report full of such errors? It is not much easy for you to tackle these problems. So we can do this hard work for you.
We have a professional developers’ team that will fix all types of CWV (Core Web Vitals) errors significantly for our clients for the maximum Website Speed and Performance. If you want Superior Website Speed then Check Our Affordable Pricing, so we can start Optimising your website.
If you have any question, then don’t hesitate to share thoughts in the comment box. We will help. Thanks.
