URL redirects direct to Google font files

[zachleat]

Loading a Google Fonts requires you to either use a JavaScript loader or load a blocking stylesheet (sample for Open Sans). For easier customization, provide a service that redirects directly to the Google font files, to use with your own CSS and @​font-face rules.

For example, when using Open Sans you’d normally have to use <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">.

Using this service, you can inline your own stylesheet and reference the urls directly:

@font-face {
  src: url(https://googlefontredirect.com/opensans/latin/400/normal.woff2) format(woff2);
}

Url mapping: FAMILY_NAME/CHARACTER_SET/FONT_WEIGHT/FONT_STYLE.FONT_FORMAT

Redirect to https://fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2

This wouldn’t eliminate the two hop limitation, but it would allow you to use it in preload or an inlined stylesheet for better performance.

When the cached urls expire, the redirects would update automatically.

[zachleat]

the font URLs are cached for a year, while the css URLs are cached for a day

https://twitter.com/googlefonts/status/862870935975714816

[felipesanches]

I'm not sure if the Google Fonts API will ever serve variable fonts, but it would be good to take that into consideration. OpenType Variable Fonts is a relatively new topic to me so I'm also not sure there would be any kind of optimization made possible by API queries to the server. But the URL may not involve a specific weight value, for instance, as the font file would basically (parametrically) contain the whole design-space of a full family in that hypothetical scenario.

I'm just thinking aloud here. I don't really have any specific suggestions at this moment other than that you should think a bit about these possibilities as well.

[thedavidthomas]

Have you seen Google Fonts Complete and PostCSS-Font-Magician by @jonathantneal?

[zachleat]

Very cool @thedavidthomas, love the postcss plugin!