Implemented using the official JS API for this, which we're now bundling.
It's use is controlled via a config option, as there's a tradeoff involved. Basically with JS loading you have the font show later, but with no potential for blocking the critical rendering path. I've explained this in the option's help.
I did look at other possibilities, mainly:
1) Just bundle Google Font .ttf files (or whatever) directly
2) Write our own deferred loading code
3) Do the trick where you say media="none" onload="this.media='screen';"
4) Whether there's a defer attribute on the <link> tag yet
5) Whether the <link> tag can just be put at the end of the HTML
1) A lot of messing about and you lose the advantage of Google's CDN and a shared cache pool and Google's ability to customise output CSS based on user agent
2) Better to use official lib, they must have made it for a reason too, probably manages network traffic well
3) Not possible with CSP. We would have to either allow inline JS, or have some very ugly <script> tag in our <head>, or write some complex code to try and detect if a <link> tag was loaded yet which is possibly unreliable. And it relies on the browser supporting dynamically changing the media attribute. Also see 2.
4) There's not.
5) Invalid HTML.
It's use is controlled via a config option, as there's a tradeoff involved. Basically with JS loading you have the font show later, but with no potential for blocking the critical rendering path. I've explained this in the option's help.
I did look at other possibilities, mainly:
1) Just bundle Google Font .ttf files (or whatever) directly
2) Write our own deferred loading code
3) Do the trick where you say media="none" onload="this.media='screen';"
4) Whether there's a defer attribute on the <link> tag yet
5) Whether the <link> tag can just be put at the end of the HTML
1) A lot of messing about and you lose the advantage of Google's CDN and a shared cache pool and Google's ability to customise output CSS based on user agent
2) Better to use official lib, they must have made it for a reason too, probably manages network traffic well
3) Not possible with CSP. We would have to either allow inline JS, or have some very ugly <script> tag in our <head>, or write some complex code to try and detect if a <link> tag was loaded yet which is possibly unreliable. And it relies on the browser supporting dynamically changing the media attribute. Also see 2.
4) There's not.
5) Invalid HTML.