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 ;)

Subscribe
Notify of
9 Comments
Oldest
Newest
Inline Feedbacks
View all comments
1 year ago

This is excellent , worked a charm – thank you!

1 year ago

YOU ARE THE MAN!

Gerry Blevins
1 year ago

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
1 year ago

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
1 year ago

Thank you! Works just great!

Abhar Kaur
1 year ago

Nice tip. Let me try :)

Damian
10 months ago

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
7 months ago

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

Sergio Alejandro Trejo
6 months ago
Reply to  JVM

Maybe… put their function on didMount or in a useEffect