As web developers, you should remember for not to ignore each small portion of the overall web page. Since those small things can produce faster load times, if you can optimize them better. Web fonts is one of the good examples, even though images are still the main thing to consider. So, in today’s article, we will reveal a method for optimizing and speeding up Google Fonts in WordPress for faster web experience.
What are Google Fonts?
Google fonts is an open source (free) directory which over 800 web font families that you can download and use it on your website. You can also download locally for print and other uses. There are many great free way to enhance the look and usability of your site in Google Fonts. No wonder that there are millions of WordPress websites utilize Google Fonts nowadays.
A good web font will give the effect of professionalism and aesthetic. However, system fonts will always win when it comes to pure performance. In fact, typography has been shown to affect conversions in a positive way. Besides, it is important to understand how Google Fonts will affect speed and performance of WordPress site.
How to Use Google Fonts in WordPress
There are two opts to add Google Fonts to your WordPress site. The first way is to grab them directly from Google. This method uses their global CDN to deliver the fonts quickly from different servers from around the globe.
- First Method
When you add them to your site there will be an external request to fonts.googleapis.com.
- Second Method
There are also external requests to fonts.gstatic.com for the WOFF or WOFF2 versions depending upon browser support.
Host Google Fonts Locally
There are many ways that you can use to speed up your Google Fonts in WordPress. For example you may add embed code from Google fonts, host Google fonts on your own CDN, and Host Google fonts locally. But today, we are going to give brief explanation on how to host Google fonts locally on your web server.
Google-webfonts-helper is a great choice to host locally, in fact, it is a free tool. By using this tool, you can download the Google fonts locally more easily and gives you all of the CSS.
Google Fonts locally is usually suitable for audience which is in a certain geographical location and close to server. Google Fonts CDN is great; however adding those additional external requests and DNS lookups can cause delays. It implies that the method will work great if you are using fast hosting such as manages WordPress hosting from Kinsta. Below is an example on how to install Google Fonts locally.
/* roboto-regular – latin */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’),
url(‘https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://perfmatters.io/fonts/roboto-v15-latin-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-500 – latin */
@font-face {
font-family: ‘Roboto’;font-style: normal;
font-weight: 500;
src: local(‘Roboto Medium’), local(‘Roboto-Medium’),
url(‘https://perfmatters.io/fonts/roboto-v15-latin-500.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://perfmatters.io/fonts/roboto-v15-latin-500.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-700 – latin */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
src: local(‘Roboto Bold’), local(‘Roboto-Bold’),
url(‘https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2’) format(‘woff2’), /* Chrome 26+,
Opera 23+, Firefox 39+ */
url(‘https://perfmatters.io/fonts/roboto-v15-latin-700.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}