Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Load Google Font with <link> asynchronously or deferred without Font Face Observer

I am wanting to use the Google Font "Noto Serif" for my website. My problem is that when I test it with Google PageSpeed Insights, it tells me I'm perfect except for one thing:

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

Your page has 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.

I am aware of a bad solution for this. It's to link the font using <script> at the bottom of the HTML file. The problem with that solution is it causes a Flash of Unstyled Text every time you click on something in my website.

I am using jekyll hosted with GitHub Pages, so I don't think I can install Font Face Observer :(

like image 256
oatmealNUGGY Avatar asked Nov 16 '16 05:11

oatmealNUGGY


People also ask

How do I install Google Fonts asynchronously?

To asynchronously load Google Fonts in all browsers, you should use their JavaScript Web Font Loader. To proof the comment of soren please check caniuse.com/#feat=lazyload and you'll see he ist right.

Should I use link or import for Google Fonts?

Should I use <link> or @import ? # Loading Google fonts in the HTML reduces the critical request depth and speeds up page load Always import your fonts from HTML, not CSS.

How do I use Google Fonts as links?

Open fonts.google.com and select the font you would like to use. Click the "+Select this style" button and select the styles you need. Copy the font link, that is the part of the code inside the quotes, in the <link> tab.


2 Answers

You can load the web fonts asynchronously with this script:

<script>    WebFontConfig = {       typekit: { id: 'xxxxxx' }    };     (function(d) {       var wf = d.createElement('script'), s = d.scripts[0];       wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';       wf.async = true;       s.parentNode.insertBefore(wf, s);    })(document); </script> 

You'll need this library, it's pretty easy to implement. I've learn this from a course I took recently, Responsive Web Design Fundamentals, if you're interested you can check it out here.

like image 145
Mirza Sisic Avatar answered Oct 09 '22 11:10

Mirza Sisic


Based on this strategy to preload stylesheets:

<link rel="preload"        href="https://fonts..."       as="style"       onload="this.onload=null; this.rel='stylesheet'; document.body.classList.add('fontLoaded')"> 
body {   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }  body.fontLoaded {   font-family: 'GOOGLE FONT', 'Helvetica Neue', Helvetica, Arial, sans-serif; } 
like image 27
Pavlo Razumovskyi Avatar answered Oct 09 '22 13:10

Pavlo Razumovskyi