I am trying to optimize the loading speed of my mobile webpage, and for that effect I am using the website:

This website evaluates my source and tells me what I can improve. In my website I download a font:

<link href="//fonts.googleapis/css?family=Open+Sans:400,700" rel="stylesheet">

and aparently this is blocking the rendering of my page. Now, if this was JavaScript I could use the async word in the tag and it would fix the problem, but this is not a javascript file I am loading!

Is there anyway to keep this resource from blocking my browser and force it to wait until it is downloaded?

I am trying to optimize the loading speed of my mobile webpage, and for that effect I am using the website:

• https://developers.google.com/speed/pagespeed/insights

This website evaluates my source and tells me what I can improve. In my website I download a font:

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

and aparently this is blocking the rendering of my page. Now, if this was JavaScript I could use the async word in the tag and it would fix the problem, but this is not a javascript file I am loading!

Is there anyway to keep this resource from blocking my browser and force it to wait until it is downloaded?

• javascript
• html
• css
• render
• google-font-api

• 1 you can load the font at the end of the body using <style> @import "//fonts.googleapis.com/css?family=Open+Sans:400,700" </style> ... still, this would cause a FOUC, just like using JS. do you want them to wait a bit longer, or have flicker? personally, i'd wait... – dandavis Commented Aug 10, 2014 at 17:14
• @dandavis: You're right, of course, although technically neither style nor link is valid inside body (or html, just head) (although the nightly spec has a scoped attribute that would allow it). But I don't think there's a browser in the world that cares. Doing it with JavaScript is probably not necessary. One might hope to start the download the tiniest bit sooner by throwing the JS in the head, but more likely the browser's prefetch scanner would find the link element just as soon anyway... – T.J. Crowder Commented Aug 10, 2014 at 19:49
• @dandavis: Thank you, I will test that option. Personally I don't mind the FOUC, so I believe that is what I need! – Flame_Phoenix Commented Aug 10, 2014 at 19:53
• @dandavis: FWIW, I'd post that as a answer (referencing the new scoped attribute). – T.J. Crowder Commented Aug 10, 2014 at 20:07
• Got it working. Who is going to post the answer? xD – Flame_Phoenix Commented Aug 10, 2014 at 20:19

2 Answers 2

You can do it with JavaScript:

<script>
(function() {
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = "//fonts.googleapis.com/css?family=Open+Sans:400,700";
    document.querySelector("head").appendChild(link);
})();
</script>

The font will be loaded out-of-band with the main rendering. Of course, that means there will be a visual change when the font finishes loading...and if the user has JavaScript disabled, it won't load the font at all.

Or, as dandavis points out, you could just use a style element at the end of body, just before the closing </body> tag:

<style>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>

That's valid HTML now (as of the 20170808 draft of HTML 5.2), but I'd never met a browser that cared about it if you placed style in body even before it was made valid.

The advantages to this over using JavaScript are:

1. In theory, the browser's prefetch scanner might find the style element and start the download earlier (although this isn't particularly likely if you put the JavaScript in head), and

2. It works even if the user has JavaScript disabled.

Alternately, you could just move your link element to the end of body, but at present, that's invalid and the scoped attribute doesn't (yet?) seem to apply. (Why make it apply to style and not link[rel=stylesheet]? I have no idea, and perhaps it's simply a matter of not having got there yet...)

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Open Sans:400,700,400italic,700italic']
    }
  });
</script>