03Apr

Google fonts render blocking – page speed

Avoid render blocking font when you use google fonts. Here is a short bit of javascript to load your google font asynchronously.

Load your Google fonts asynchronously

You can do that by using Google’s Web Font Loader. Simply place the following code below in your footer.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Lato:400,400i,700|Roboto+Slab:400,700' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Hope that help. This is good for speed and so it’s a bonus for your SEO ;)

9
Leave a Reply

8 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
  Subscribe  
newest oldest
Notify of

This is excellent , worked a charm – thank you!

YOU ARE THE MAN!

Gerry Blevins

WOW, got a 91 on the pagespeed but I put it in the header and it broke my testimonial slider. I need to get a plugin to put this into the footer to see if I can get the same score, if not then that testimonial slider is going BYE BYE.

Gerry Blevins

Yes it works in the header too. Nice bit of code there. WOW, huge difference for me. Went from the 70’s to the 90’s.

Alexey Mind

Thank you! Works just great!

Abhar Kaur

Nice tip. Let me try :)

Damian

Hi, nice tip but won’t work for me in such a way of multiple fonts, I need to wrote them as separate properties like this:

google: { families: [ ‘Lato:400,400i,700’, ‘Roboto+Slab:400,700’ ] }};

JVM

I am using nextJs and having hard time converting this function to next compatible. Any help you can provide ?

Sergio Alejandro Trejo

Maybe… put their function on didMount or in a useEffect