You can specify multiple formats in the CSS. Just put them in order, and the browser will download the first one it supports.

And the css is going to be gzip'd anyway.. so we're talking a few extra bytes. Nothing that would make any difference in page load time.

There's no need for all of that extra work you listed. But I get why you want it to sound complicated, so people will use your work instead. Shouldn't you put a "I work at cloudflare" in there somewhere?

Google Fonts will serve a different .woff2 font file depending on the user-agent. You cannot accomplish that with just CSS. See https://news.ycombinator.com/item?id=8802748

the only difference is that on non-windows platforms google strips font hinting. That's just a (very minor) performance optimization done to reduce file sizes. Just download the windows version of the fonts (in all of the formats - woff, woff2, eof, etc).. the minor difference in size isnt worth the effort.

You can also just download the ttf files, and run them through a web font generator w/ proper support for hinting, etc... and then you'll have all of the formats you need.

If anyone wants to do this, I have used this tool in the past: https://google-webfonts-helper.herokuapp.com/fonts