How to host Google Fonts local through CSS -Tutorial
In this step-by-step guide I will help you to host Google Fonts local through CSS and stop them from loading externally. By doing this, you will have a faster website, less DNS lookups and less HTTP request. This way you can increase your page score. We were able to take of 33% of our page load time by hosting our fonts locally. But there are disadvantages as well, just keep reading…
What are Google Fonts?
Google Fonts was initially launched in 2010 as ‘Google Web Fonts’ and this says it all. A Google Font is a Web Font from…. you guessed it: Google!
The open source font directory from Google is by far the most Popular directory in the world. A quick look at the analytics will blow your hat straight off. We took a snapshot for you.
Why use Google Fonts?
Picking the right font (Typography) for your website is crucial for a nice design. Google Fonts offer you a whooping selection of 916 different fonts. That should give you plenty to choose from. The chosen font will preferably increase readability and user experience and is crucial for better delivering your message to your visitors. However, the downside to all this, is that it could come to a reduction in website speed performance. Let’s dive a little deeper.
Interact better with your guests / employees!Turn any screen into a dynamic screen with Simplify Screen
Check out Simplify Screen
The downsides to Google Fonts and hosting them local
Just as any other Web Font, the fonts from Google do not come pre-installed on a device (computer, tablet, phone, etc) and must be downloaded by the browser before displaying it. The web font you use is an additional HTTP request, as well as another DNS lookup. You will see fonts.googleapis.com to get the CSS file and then font.gstatic.com to download those. And each visitor needs to download these files on page load… When you do host Google Fonts locally, all the request will come from the same domain as your other assets, and most likely you will not need this extra CSS file either.
Hosting Google Fonts local doesn’t necessarily mean that your page speed will improve. First of all, Google Fonts could already be cached on your visitor’s computer from going to a different web page. When this other page uses the same font as you, then the visitor will already have it installed.
Also, if you are not using a CDN like Cloudflare or KeyCDN (please do!) you could, in the end slow down your website by hosting your fonts locally. A CDN reduces DNS lookups and increases the speed of a website overall. It is designed to do all this. And Google, yes it is Google, obviously does this as well. Therefore their fonts are loading relatively quickly if you compare it to downloading assets from mediocre servers. We advice not to host fonts local if you are not using a CDN.
Step-by-Step tutorial to host Google Fonts Local
Step 0: Let’s quickly run a test to see where we are
We are using GT Metrix to get some information before we start. OK.. the important figures for us here are that we have 71 Request, 1.56MB Page Size and we are fully loaded in 3.1 seconds. That we can do better. Follow the tutorial below and see where it gets us.
Step 1: See wich Fonts you are using
On the same performance report, we can see wich fonts are actually loading as well. Navigate to the ‘Waterfall’ tab and look for fonts.gstatic.com. Hovering our mouse over the requests teaches us that we are using ‘Lato’ as a Google Font.
Step 2: Download the Font files you need
If you go to the the google fonts website, you can select and download all the fonts you want. But here they come as a .ttf file extention. You would need a converter to get another, more modern compression to .woff and .woff2. Let’s make it a little more easy, shall we?
The best way to download the Google Fonts, is to use the free Google Webfonts Helper. First choose the font you want and then select the styles you need. For us this will be the font ‘Lato’ in the styles ‘Regular (400)’ and ‘Bold (700).’ Also we need both Charsets ‘Latin’ and ‘Latin-ext’.
This free service allows you to download the fonts in different file extentions by giving the option to go for ‘Best Support’ or for ‘Modern Browsers’. With ‘Best Support’ you will receive all file types, where the ‘Modern Browsers’ version will limit this to the most compressed .woff and .woff2 extentions only. And this last option is what we want.
After this, you will also see, that you will automatically receive the CSS code to call for the fonts. Copy the CSS to your clipboard and download the font files.
Step 3: Upload the Font Files to your server
Next, you will take the files you just downloaded and upload them to your server via FTP. We have created a new folder called ‘fonts’ and uploaded the fonts here.
Step 4: Add these fonts to your CSS
Now that we have all the right files in place, you’ll need to reference to them through CSS. Many WordPress themes allow you to add custom CSS to your site, but if not you can also put this in the Child-Theme in stead. Paste the CSS you copied before into your style sheet.
Make sure that the source url is correct. It should point to the files, you have just uploaded through FTP. If you are using a CDN, like we use KeyCDN, then you need to change the file path to refer to the CDN. Small note, our uploads through FTP are automatically copied to our CDN.
I hear you thinking, ‘a CDN is not local, is it?’ Well, as much as your files are coming from a different server, these are still considered as your local assets. And all of your other assets will be coming from the same CDN server already. So in this case, you can safely say that you do ‘Host Google Fonts Locally’ and you did it all with CSS.
Interact better with your guests / employees!Turn any screen into a dynamic screen with Simplify Screen
Check out Simplify Screen
Last but not least, you will now need to call for this new ‘font-face’. You can add as many CSS classes as you need. Sometimes you need to inspect your page CSS to see wich classes are calling for those fonts and add them to this list. For us, we limit ourselves to the basics below.
Step 5: Let’s see where we are
So, by following the steps we have increased our page score quite a bit. We reduced our request by ‘2’, taken 0.34MB off from the total page size and all this resulted in reducing the load time by 1 total second, a 33% improvement!
Take away the ‘Ensure text remains visible during webfont load’ message
Whilst we are at it, we could just as well get rid of this message. When you are using PageSpeed Insights to measure your site, then you have probably seen the the instruction to ‘Ensure text remains visible during webfont load’
Let’s get rid of this message! In your CSS from before, we can simply add ‘font-display: swap;’ and repeat this for all the font faces you use. The code will look like this:
font-display:swap; Instructs the browser to use the fallback font to display the text until the custom font has fully downloaded. This is also known as a “flash of unstyled text” or FOUT.
Conclusion
To host your Google Fonts local through CSS reduced our page load time by 33% and the page size with 0.34MB. In some cases, this is definitely the way forward. For us this is a big increase. But let’s be fair, we started off with a pretty quick site already.
If your website is much slower then this, then my advice would be to start with optimizing other things first, depending on what your analysis says.
And as said before, this whole thing also only makes sense when you use a CDN. Here at Simplify Everything we utilize both fast hosing and a CDN to turbo charge our sites. Maybe you should have a look at our portfolio to see what we can do for you.
Raymond is a Dutch guy with Hungarian roots, living in Austria. Can you still follow? Apart from loving the outdoor life in the mountains, he spends most of his time indoors playing with computers. He has over 10 years of experience with the design of websites and especially with e-Commerce.
-
-
-