Suggestion: Offer a non-render blocking way of loading Google Fonts?

As discussed in a [blog post I wrote](https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/) and in a [subsequent Twitter conversation](https://twitter.com/simevidas/status/1219382136509227014?s=20) there is a noticable performance impact to using Google Fonts hosted on the Google Fonts domain. Should Google Fonts offer a non-render blocking way of loading to address that?

The use of the [recently supported](https://github.com/google/fonts/issues/358) `font-display: swap` offers a good performance gain, to not block rendering or FOIT while waiting for the fonts themselves to download, but it still depends on the Google Fonts CSS being downloaded to see that `font-display: swap` instruction.

As an example, a typical waterfall of a site using Google Font is shown below:

As can be seen the initial render (green line) cannot happen until the Google Fonts CSS has been downloaded on line 4 after 4.0 seconds, as CSS is render-blocking. So you can see that, even though we are using `font-display: swap`, there is still that performance hit due to the time taken to set up the TCP/HTTPS connection to Google Fonts, and then download the CSS. As we are using `font-display: swap` the Google Fonts CSS doesn't really need to be render-blocking, and the site could have loaded after 2.9 seconds when the main CSS is loaded (or after 2.2 seconds if the styles were inlined into the HTML).

I can think of two ways of supporting this:

1. Add an `async` option to `` commands. This does not currently exist so would presumably need to go to the CSS Working Group and then be implemented by browsers. Not sure if Google Fonts could help push this as they would be a perfect use case for this?

2. Offer a JavaScript method of loading Google Fonts, with `async` on the `` tag, which then injects the `<link rel="stylesheet" ...>` into the document only after the CSS has been downloaded. This would also need a `<noscript>` fallback to load the CSS in the usual way. Examples of [such scripts exist](https://github.com/filamentgroup/loadCSS/) but an officially supported Google Fonts version would be better.

Of course people can always self-host to avoid this (as discussed in my blog post) but that can be more complicated to set up if you want the full benefits of the performance enhancements that Google Fonts does for you by browser feature detection (also discussed in my blog post), so I thought I'd open this issue to ask if it should be option to do this while still loading from Google Fonts domain?