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

8 thoughts on “Google fonts render blocking – page speed

  1. 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.

  2. 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.

  3. 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’ ] }};

Leave a Reply