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 ;)
This is excellent , worked a charm – thank you!
YOU ARE THE MAN!
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.
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.
Thank you! Works just great!
Nice tip. Let me try :)
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’ ] }};
I am using nextJs and having hard time converting this function to next compatible. Any help you can provide ?
Maybe… put their function on didMount or in a useEffect