How to host Google Fonts local through CSS -Tutorial (ok)

https://simplify-everything.com/en/blog/2019/05/30/how-to-host-google-fonts-local-through-css/

How to host Google Fonts local through CSS -Tutorial

Last updated: March 30, 2020

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.

source (29/05/2019) https://fonts.google.com/analytics

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.

Greet your guests in style on your Smart TV. Give your guests that extra something by dynamically greeting them and giving them the information they need.

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.

source: GT Metrix

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.

source: GT Metrix

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’.

source: Google Webfonts Helper

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.

/* lato-700 - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'),
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-regular - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

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.

Greet your guests in style on your Smart TV. Give your guests that extra something by dynamically greeting them and giving them the information they need.

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.

body {font-family:'Lato', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6,p,a {font-family:'Lato', Arial, sans-serif;}

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:

/* lato-regular - latin_latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://OurCDN.com/fonts/lato-v15-latin_latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

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.

PreviousAdd data to cpt api data, Postman (ok)NextThêm thuộc tính vào menu, add attributes, Remove attributes (ok)

Last updated