Do you know you may lose over 50% of traffic if your blog takes more than 3 seconds to load?
That’s a significant loss of traffic. Right? One key reason websites load slowly is the use of external resources.
The more external resources you have, the slower your website will be. Google Fonts is one of the contributors to your list of external resources.
In this article, we will learn How To Host Google Fonts locally In WordPress so that the number of external resources decreases and your websites can speed up.
Table of Contents
What Is Google Font?
Google Fonts is a repository of about 900 fonts offered by Google. Google font is free to use without licensing or setup costs.
Nowadays, most theme developers use Google Fonts because it’s easy to use. Even theme developers don’t need to include the font library in their theme package.
Whenever your website (with Google Font) loads, it downloads the Google font library from the Google server.
Very straightforward. Right?
Changing the Font is also very easy if you use Google Fonts. You need to change a few lines of code in your theme CSS file, and you are done. Here are a few benefits of using Google fonts.
- Wide range of selection choices
- Font loading time is comparatively less
- Changing the Font is easy and quick
- No licensing or setup fee
- Used by most themes
Why Host Google Font Locally In WordPress?
We have already realized that Google fonts offer numerous benefits. Then, why even consider hosting Google Fonts locally?
Hosting locally means that Google Fonts should be loaded from your web server, not the Google server.
The primary issue with Google Fonts is that it loads fonts from the Google server every time your website is loaded.
Every time an HTTP call is made to download the font file. It is not ideal, as an external call can always affect the website’s speed.
If you host Google fonts locally, your website won’t make any extra HTTP calls to Google fonts, as they will be stored on your web server. That improves your website speed.
Most cache plugins do not cache files stored on an external server, as they lack control over it. If you host Google Fonts locally, those can be cached by cache plugins.
The image below displays the GTMetrix report for a website that utilizes Google Fonts. It shows the website loads an extra resource and makes an extra HTTP call.
This is a new website with no content. If you have a big website, Google Fonts will make numerous HTTP calls.
Hosting Google Fonts locally helps your cache plugin cache the Google fonts, thereby increasing your website’s speed.
Below are a few reasons to host Google Fonts locally on your server.
- Increases website speed
- Reduces HTTP calls
- Font can be cached
Is It A Must To Host Google Font Locally In WordPress?
You can use Google Fonts without hosting them on your server. All Google fonts are loaded from Google CDN, which is very fast.
On top of that, if you use popular Google fonts like Poppins and Roboto, there is a chance that those fonts are already cached in the web browser. In that case, hosting Google Fonts locally in WordPress won’t make any difference.
How To Use Google Font Locally In WordPress?
We can use two methods to host Google Fonts locally in WordPress. One uses the manual method, and the other uses a plugin.
How To Use Google Font Locally In WordPress Using the Manual Method.
To download and host Google fonts locally in WordPress, follow the steps below. Although there are many other methods that you can use, the process below is the easiest one, and I have also applied it to my blog.
1. Choose The Google Font File
To download your favorite Google font file, go to this link and type your font name in the top left corner.
Once you select the correct Google font name, you will be presented with all versions of that font file. You have charsets to choose from.
You also have the option to choose font styles, such as regular, italic, bold, etc. Make selections according to your choice.
2. Download Google Font Files
Once you have chosen the Google font and selected the characters and style, you will notice a few lines of CSS code generated automatically.
Download the Google font file by clicking on the bottom of the page.
3. Upload Google Font Files To Webserver
The downloaded font files will be in ZIP format. Unzip that, and you will see contents like what I have shown below.
We have selected two styles, so we have only 10 files. You will see more files in the zip folder if you choose more styles.
Below are the types of font file formats that will be downloaded. Most modern browsers support the WOFF or WOFF2 format.
- Open Type Font ( OTF)
- True Type Font (TTF)
- Scalable vector graphics font (SVG)
- Embedded Open Type Font (EOT)
- Web Open Format Font ( WOFF or WOFF2)
Upload the contents of that zip folder to your web server. Ensure that you create a folder and upload those files to it.
If you prefer, you can only upload WOFF or WOFF2 format files, as these are the most recent formats and are supported by most browsers.
For example, you have uploaded these font files to a folder named “Font. “
4. Write Custom CSS Code
Now, you need to return to the font download page and replace the URL in the code with the URL of your font folder. In my case, I replaced the mentioned URL with my font URL, which is https://staging.riansblog.com/font/
To add your font URL to the CSS code, you need to enter your URL using the “Customize Folder Prefix” option. If you enter the URL there, the CSS codes will be updated automatically.
5. Add Custom CSS To the Child Theme CSS File
Once the URL is updated, copy those pieces of code and add them to your child theme CSS file. You can also add these codes to the additional CSS section of your theme, if the theme supports it.
You may also choose to change the name of the Font Family. Don’t worry, and it won’t change your Font. It will just differentiate the default Google font from your locally hosted Google font.
6. Declare Locally Hosted Fonts in Body and Header tags
Please copy the code below to your child’s theme or additional CSS section. This instructs the browser to use your locally hosted Font for bodies and headers.
body {font-family:'Poppins', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6,p,a {font-family:'Poppins', Arial, sans-serif;}
ο»ΏIf you changed the font family name before, you must also change it here. I decided to keep it “Poppins” here in this code. Also, I kept “Poppins.”
” Arial ” is the primary fallback font, and “sans-serif” is the system fallback font. If you’re unfamiliar with a fallback font, it is a backup font that loads if your primary Font fails to load for any reason.
For example, in this case, if our primary font (Poppins) fails to load for any reason, the browser will try to load the primary fallback font (Arial). In the worst case, it will load the default system font (Sans-serif) if it is available on your operating system.
Therefore, carefully select the fallback font, which should be available on your operating system or theme. If you choose the wrong fallback font, your website may not load at all.
That’s It. We are done. You are now hosting Google Fonts locally.
Hosting Google Fonts locally can speed up your website by up to 20% if it’s a complex website. The example I have shown here does not show much difference because this website is brand new with no content.
7. Preload Locally Hosted Google Font For Added Speed
The browser must parse the CSS code and generate the object model even if you host Google Fonts locally. That wastes a lot of time. If you don’t want to waste that time, you can preload the locally hosted font file.
Please note that for preloading, use only the WOFF2 format, as most browsers support it with preloading.
For preloading, you can add the following code to the <head> section of your website. Please change the URL to your font URL. You need to add a separate line of code for each style. In the example below, I have added the code for style 500.
<link rel="preload" as="font" type="font/woff2" href="https://www.rianstech.com/font/poppins-v12-latin-ext-500.woff2" crossorigin>You can also use the Perfmatters plugin to preload fonts.
8. Fix” Ensure Text Remains Visible During Webfont Loadβ For Extra Speed
Sometimes, you may encounter this issue in Google Page Insights, which states, “Ensure Text Remains Visible During Webfont Load.”
Google suggests that we display the system default font before your custom font loads. That helps in speeding up the website.
To solve this problem, add a font-display swap for every font size you use on your website.
Here are the complete codes.
/* poppins-500 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://staging.riansblog.com/font/poppins-v20-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://staging.riansblog.com/font/poppins-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://staging.riansblog.com/font/poppins-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('https://staging.riansblog.com/font/poppins-v20-latin-500.woff') format('woff'), /* Modern Browsers */
url('https://staging.riansblog.com/font/poppins-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://staging.riansblog.com/font/poppins-v20-latin-500.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://staging.riansblog.com/font/poppins-v20-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('https://staging.riansblog.com/font/poppins-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https://staging.riansblog.com/font/poppins-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('https://staging.riansblog.com/font/poppins-v20-latin-700.woff') format('woff'), /* Modern Browsers */
url('https://staging.riansblog.com/font/poppins-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('https://staging.riansblog.com/font/poppins-v20-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}
body {font-family:'Poppins', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6,p,a {font-family:'Poppins', Arial, sans-serif;}How To Use Google Font Locally Using the OMGF plugin?
You can refer to the following video to learn how to host Google Fonts locally using the OMGF plugin.
Conclusion: Host Google Font Locally
As I mentioned earlier, if you have an established website with numerous plugins and content, hosting Google Fonts locally will definitely help you. It will speed up your website.
On the other hand, if you have a new website, this may not reveal a significant difference.
FAQ | Host Google Fonts Locally
What Is Google Font?
Google Fonts is a repository of approximately 900 fonts offered for free by Google. Almost all themes nowadays come with Google Fonts.
Is Hosting Google Fonts Locally Worth It?
Yes, it is worth it if your website has a lot of content and gets good traffic. But for new websites, it may not be worth it.
Does Hosting Google Fonts Affect SEO?
No, it does not have any effect on the SEO
