How to Install Google Fonts Locally and Eliminate Render Blocking in Google Page Speed Insights

Submitted by techyboy on Tue, 11/07/2017 - 20:49
eliminate render blocking

It is usual to test your website performance using Google Page Speed Insights. Google does not like slow performing sites. You will rank extra and get more traffic if your site loads in less than 3 seconds. Website look depends not only on graphics but also on Fonts used to render text. Google Fonts is a heaven for website developers to get open source fonts that can be loaded fast even on bandwidth constrained internet connections. Google Fonts are available in 135 languages. Google Fonts are served using CDN servers. So, it will not take much time load fonts every time.

Also Read How to Check Your Website For Correct Installation of SSL Certificates and Errors | 7 SSL Checker Tools

Installing Google Fonts Locally

1. Go to Google Fonts website and Choose a font of your crush.

installing google fonts

 

2. You can import or include the chosen font using two methods.

STANDARD

<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">

 

@IMPORT

<style>
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
</style>

 

3. You can start using the font right away without any problem. But, you will get Render Blocking Error in Google Page Speed Insights.

 

Possible Optimizations

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 1 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

Remove render-blocking JavaScript:

  • https://www.techysoup.com/….js,qv==3.2.1.pagespeed.jc.10eYY_YxcM.js

Optimize CSS Delivery of the following:

  • https://fonts.googleapis.com/css?family=Indie+Flower

 

4. Along with Render Blocking error, you will also notice added page load time due to DNS lookup time of GOOGLEAPIS.com. You can solve these two problems simply by copying the Font locally. Type the Font URL in Google Chrome and Copy Paste the Code in one of your existing CSS files of Theme.

/* latin */

@font-face {

font-family: 'Indie Flower';

font-style: normal;

font-weight: 400;

src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v9/ 10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }

 

5. Download the font file https://fonts.gstatic.com/s/indieflower/v9/ 10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2 locally the rename the file as simply INDIEFLOWER2.WOFF2. Change the CSS code with the new file name and path as follows.

/* latin */

@font-face {

font-family: 'Indie Flower';

font-style: normal;

font-weight: 400;

src: local('Indie Flower'), local('IndieFlower'), url('/themes/mytheme/fonts/INDIEFLOWER2.WOFF2') format('woff2');

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }

 

6. Now remove the Standard Include or Import Google Font URL, clear the Cache and Reload the webpage. Go for testing your site on Google Page Speed Insights again. You do not find any Google Fonts URL under render blocking list.

Well Done. Good Job..

ALSO READ

Add new comment

Next Article