Archived topic
Load Google Fonts Async
6 replies · Started by arabsworks on August 14, 2017
Hi Tom,
As you know most websites these days are using the useful Google web font library allowing you to import a huge library of fonts straight to your webpage so how we can you use the following code to load google fonts Async with GeneratePress.
The google subset font is:
https://fonts.googleapis.com/css?family=Changa:200,300,regular,500,600,700,800|Cairo:200,300,regular,600,700,900&subset=arabic
The code snippet :
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Changa' ] }
};
(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>
I was wondering if there's a way to load Google fonts asynchronously in GeneratePress. i.e. not in the head section of each page, so that the page will start to render before the fonts are loaded resulting in a better page speed rank.
I'm looking at Google’s web font loader (https://github.com/typekit/webfontloader) and came up with that code as they said to include at the page footer. But I'm not sure as to how to implement it in GeneratePress, as the theme itself outputs the code line in the head section.
You would just tell GP not to load the fonts:
add_action( 'after_setup_theme', 'tu_remove_google_font_call', 50 );
function tu_remove_google_font_call() {
remove_action( 'wp_enqueue_scripts','generate_enqueue_google_fonts', 0 );
}Then you would add your JS to the footer.
Thanks Tom for the code, as many themes developer change the code to load Google fonts asynchronously
can you add this in the Typography Add-on please.
I'm definitely looking into it :)
+1 for the feature.
@Tom: For now, will add the function you provided. Thank you!
+1,
This is something I would like to see also.
