render blocking google fonts

render blocking google fonts

<script type=”text/javascript” async>
WebFontConfig = {
google: { families: [ ‘Merriweather:400,300,300italic,400italic,700,900,900italic,700italic’,’Lato&subset=latin,latin-ext’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})(); </script

 

Move Google font to footer if it is added via functions.php

changed add_action(‘wp_enqueue_scripts’, ‘qode_google_fonts_styles’);
to
add_action(‘wp_footer’, ‘qode_google_fonts_styles’);

 

 

Resources

https://fonts. googleblog .com/2010/09/optimizing-use-of-google-font-api.html

https://www. webucator .com/blog/2016/10/load-web-fonts-asynchronously-avoid-render-blocking-css/

https:// shellcreeper .com/how-to-load-multiple-google-font-in-one-url-request/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s