Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Google font loaded by webfontloader is render blocking #386

Open
PrafullaKumarSahu opened this issue Dec 5, 2017 · 5 comments
Open

Google font loaded by webfontloader is render blocking #386

PrafullaKumarSahu opened this issue Dec 5, 2017 · 5 comments

Comments

@PrafullaKumarSahu
Copy link

I used


add_action('wp_footer', 'load_google_fonts');
function load_google_fonts(){
	?>
	<script type="text/javascript">
    WebFontConfig = {
	google: { families: [ 'Open+Sans:400,600,700,800', 'Railway:100,200,300,400,500,600,700,800,900', 'Droid+Serif:400,700', 'Lato:300,400,700,900', 'Montserrat: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>
	<?php
}

Using the Web Font Loader asynchronously avoids blocking your page while loading the JavaScript.
to load fonts in my site,

BUt is there any way to avoid blocking my page while loading these fonts?
@superp
Copy link

superp commented Apr 4, 2018

Have the same issue

@Preen
Copy link

Preen commented Jun 5, 2018

+1

@suiteD1989
Copy link

Same issue here

@barnlight
Copy link

barnlight commented Aug 14, 2018 •
edited
Loading

Can confirm. It puts the <link> tag right into the <head>, and this is enough for google to flag it as render blocking, despite being loaded async. Maybe give the option to load it before </body>

@mattkeys
Copy link

mattkeys commented Mar 22, 2019 •
edited
Loading

I ran into this today, here is my solution:

function load_google_fonts() {
	?>
	<script>
		(function () {
			var done = false;
			var script = document.createElement("script"),
			head = document.getElementsByTagName("head")[0] || document.documentElement;
			script.src = 'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.26/webfontloader.js';
			script.async = true;
			script.onload = script.onreadystatechange = function() {
				if ( ! done && ( ! this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) ) {
					done = true;
					WebFont.load({
						google: {
							families: ['Ubuntu:300,400,400i,500,700']
						}
					});
					script.onload = script.onreadystatechange = null;
				}
			};
			head.insertBefore(script, head.firstChild);
		})();
	</script>
	<?php
}
add_action( 'wp_head', 'load_google_fonts' );

This will insert the webfontloader script with the async attribute, and then once the script has been loaded by the browser, it will execute the WebFont.load() call to get the specified Google Fonts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@superp @Preen @mattkeys @PrafullaKumarSahu @suiteD1989 @barnlight