Consider Deferring the Load of the Web font #3
Description
Generally speaking stylesheets are part of the critical rendering path. This means that as the browser processes the page when it sees a stylesheet it goes "I gotta go download this now!" Before it does anything else.
Generally speaking, webfonts are heavy and non-critical (but don't let your art director hear that last part). So it is best to defer loading them.
Here's the pattern. It is a pretty clever trick. You set the media to none initially, and then onload you set it back to all (or screen or whatever). This will cause the browser to defer loading it until basically everything else has loaded.
But what about if JavaScript is unavailable? That is what the <noscript> is for. It will load it in a normal way.
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="none" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" media="all"></noscript>And one last thing. Include the webfonts at the bottom of the <head>, not the top. That will let the main stylesheet, favicons, stuff like that load first in all scenarios.