One issue I encountered while trying to achieve a high score in GTmetrix was in regards to Google fonts and how I injected them into my site directly using Google fonts CDN. The only way to solve it was to learn How to Host Google Fonts Locally.
An interactive directory of free hosted application programming interfaces for web fonts.
Most people are familiar with Google fonts. For those who don’t, here’s how I describe it:
It’s a big, free and awesome library of fonts which you can use as your heart desire. It’s managed by Google and served from the domains fonts.gstatic.com fonts.googleapis.com There’s many ways to add Google fonts to your site, two of the most popular options are:
- Standard (link rel= method) : You paste the Google font link in the header of your site. For example: header.php for WordPress users.
- @import : with this options, you inject the code inside your stylesheet. For example: style.css for WordPress users.
These two options great for both development and production environment, but I personally use them only for development.
As I mentioned before, my issue was with GTmetrix. I wanted to achieve the highest score possible, but I faced these two issues:
Both showed a link to the Google fonts that I used on this site. Which is the following:
In order to solve these issues, I had to learn one thing:
# How to Host Google Fonts Locally
Learning how to do that is an easy thing, and only takes 4 steps. 7 steps if you want to turn it into a WordPress plugin.
All you need is an access to your server and a text editor.
# Step 1
Visit Google Webfonts Helper and search for your desired font.
# Step 2
Select the character sets and styles that you need
# Step 3
Chose what browsers you want to support and copy the CSS code and paste it in your website stylesheet file or Custome CSS Plugin.
You have two options here:
- Best Support: You will get these font formats: eot,woff,woff2,ttf,svg
- Modern Browsers: You will get these font formats: woff,woff2
The example below is Open Sans font with support for all browsers:
Please make sure you have the right destination for the font files, which depend on where you want to put them on your server.
# Step 4
Download your font .zip file. Uncompress it & upload the font files to your server.
And that’s it. The font that you’ve chosen will be loaded from your server.
If you would like to take this one step further, you can convert this into a Site Specific WordPress plugin.
# Host Google Fonts Locally using a WordPress Plugin
In order to wrap this and turn it into a Site Specific WordPress Plugin, make sure that first, you create a set of folders and sub-folders that look similar to the one described below and follow the same structure:
# Step 5
Put all the fonts you downloaded in step 4 inside the /Fonts folder
# Step 6
Inside the folder LocalFontsPlugin create the file LocalFontsPlugin.php and write this in it:
# Step 7
Inside the folder CSS, create a file and name it LocalFontsPlugin.css. Inside it, write the CSS code that you got in step 3
Zip it all up and upload it as a new plugin. Activate it and that’s it.
You can download a sample of this plugin here.
# In Conclusion
Now I control the fonts on my site. They load faster than before, and I got rid of the 2 annoying GTmetrix error.