[WordPress] How to Serve Google Fonts from Your Own Server
Thinking about self-hosting fonts on your WordPress site? Here’s a step by step guide on how to serve Google Fonts from your own server.
Visitors, developers or search engines: everyone wants a fast website. The craze for speed has led website owners including myself to go crazy about speed. I have been through a stage when I spent hours and hours on improving my sites’ speed and solving all those flags shown on web page performance sites.
In order to get a faster website, I have ditched my old host in favour of DreamHost’s reliable hosting. I also made a lot of improvements on the back-end and had to stop using many third party services which I thought would have been ‘cool’ to place on my site.
My pursuit of speed made me go nuts but it also made me wiser. I have realized and will advise you too: Instead of spending countless hours on improving speed, focus on your site’s content. Use a fast and reliable host, avoid scripts and use optimized images. This will do the most part for making your website fast. All other flags on those performance testing tools can wait.
I have also learned that every small step taken to improve a site’s speed helps. And one of those steps is to ditch Google Fonts in favour of loading fonts from your own server. Which eventually brings me to the topic of this article.
Why Serve Google Fonts Locally?
Although not really necessary, you might want to self-host your fonts depending on different scenarios. Let me explain a few of them.
When you run a test on performance testing sites like Pingdom or GT Metrix, you will notice additional calls being made to Google in order to load CSS and fonts.
You may also notice ‘far-future expiration date’ flag being triggered as shown in the following screenshot.
Google’s services are blocked or have been blocked in past in a number of countries. Although highly reliable, Google’s service can see downtime, too. In both these cases, your visitors will see default fonts instead of custom ones. Loading them from your server will make sure they are not affected by such events.
By serving Google Fonts from your own server, it is no longer required to make extra requests to Google as your server will be serving CSS and font files itself. This will slightly reduce the page load time, too.
So basically, yes. Loading fonts from your server can be a good idea.
Before we move to the tutorial, I would like to call Brick from The Middle to explain the importance of fonts.
The process of bidding farewell to Google Fonts requires following steps.
- Downloading font files and uploading them to your server.
- Generating CSS and making changes to your theme.
- Removing all references of Google Fonts from your site (optional).
Services used in this tutorial:
- WordPress v4.7.4
- Hosting on DreamHost
- CDN service by KeyCDN (optional)
- My fonts: Roboto Slab for headings and Merriweather Sans for main text.
How to Serve Google Fonts from Your Own Server
Step 1: Choosing and downloading font files
The first thing we need to switch from Google Fonts is to choose our favorite font and then downloading it to our computer.
To browse all available fonts on Google, go to fonts.google.com. Browse those fonts and choose the one that suits you. I suggest you select at least two different fonts: One for headings and one for the main text.
Once you have made up your mind on fonts, head over to Google Webfonts Helper tool. Now search for your favorite font and select charsets (latin, latin-ext etc.) and styles (regular, bold, italic etc.) as required. Then click the Download button and you will get a zip file that contains your font.
You will do the same for all fonts that you need in your setup. I will download Roboto Slab and Merriweather Sans.
Step 2: Uploading fonts to your server
Now it’s time to create a folder called ‘fonts’ somewhere on your server. I suggest something like /wp-content/themes/your_theme/fonts.
I have changed the name of my wp_content directory to ‘files.’ So the font path in my setup will look like this: techstuffer.com/files/themes/voice/fonts.
Once the new directory is created, we will upload all font files to this folder. Below is how my ‘fonts’ folder looks after I uploaded all versions of my two fonts.
Step 3: Generating CSS and making changes to theme
Now go back to Google Webfonts Helper, search for your font and copy the CSS code under ‘Copy CSS.’
To make things easier, we will use the Customize folder prefix (optional) box to enter the complete path to our ‘fonts’ folder. You will enter the path to your ‘fonts’ folder as follows: example.com/wp_content/themes/your_theme/fonts.
Prefix http:// or https:// according to your setup. After adding the path to my ‘fonts’ folder, the CSS code looks like this:
If you are using a CDN service, you will change the path as follows: cdn.techstuffer.com/files/themes/voice/fonts
Now open a text editor on your computer and paste the CSS code for all fonts that you are planning to use. I will do this for Roboto Slab and Merriweather Sans.
Okay, now we have our favorite fonts already uploaded to our server. We also have the CSS code required to tell our theme to load selected fonts locally. And now, we will do just that.
In order tell our theme to load fonts from our local server, we will need to copy the CSS we got from Webfonts Helper and paste it into out theme settings.
If your theme lets you do the same, then go the settings area of your theme, and look for something like ‘Additional CSS.’ Now paste the CSS that we generated on Webfont Helper and save the settings.
If your theme doesn’t support custom CSS option, you can use a plugin like Simple Custom CSS and JS which will let you add the CSS.
Once you add the CSS to your theme, your site is ready to load fonts from your server. But before that, clear all cache from any cache plugin you are using.
Step 4: Testing Your Setup
Now that you have uploaded your fonts and made required changes to your theme, your site should load fonts locally. To verify this setup, clear all cache on your browser (or use a different browser) and load your site.
Right click and select View Page Source. Search for the name of your font (like Merriweather Sans, in my case). You should be looking for a line that looks like the following.
Notice that my fonts are being loaded from the path I set in the step above. If this line still shows fonts.googleapis.com, there’s something wrong with the setup.
You should also check your site using Pingdom and GT Metrix to make sure your fonts are loaded from your own server and no call to fonts.googleapis.com is being made. Notice the difference in the screenshot below.
If your fonts are being loaded from your own server but you still see a call to fonts.googleapis.com being made, you might have to follow Step 5.
Step 5: Disabling Google Font Reference (optional)
Note: This step is optional and depending on your site setup, there might be no other third-party calls being made to Google Fonts. In that case, you don’t need to follow this step.
On one of my sites, fonts were being loaded from my own server successfully, but there was one Google Fonts reference being made by WordPress. In this case, there’s eventually no benefit even if you serve Google Fonts from your own server.
To solve this out, I used a plugin called Remove Google Font Reference which disables all references to Google Fonts.
By disabling Google Font reference completely, we will make sure that no third party plugin, theme or WordPress itself is making any calls to fonts.googleapis.com.
After you install and activate this plugin, check one of your site’s pages using Pingdom or GT Metrix once again. Now there should be no reference to Google Fonts.
Many themes and plugins include a reference to Google Fonts. They usually include an option to disable Google Fonts library, too. Google Fonts from Your Own Server