woff / woff2

[SNagel]

is there a way to get a full-featured woff/woff2 file for embedding from a local webserver instead of google?

• in europe, using google fonts as a font file provider currently is a data protection problem (technically absurd, but yet legally existing).
• Embedding the .ttf file is quite a heavy weight with 1.8MB file size.

[Lorp]

Probably the easiest way is to use the Google Fonts CSS API.

Here is how to get Roboto Flex with its opsz and wght axes, but without the parametric axes:

https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap

This CSS links to 6 woff2 fonts, split by Unicode range. Here is the Latin font (88 kB):

https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXRrV8cWW4O8LJCoXjCnwSRSaLshNP1d9-EmF8tqHbE.woff2

You can download these fonts and serve them yourself. Copy the CSS, edit the URLs to your server and maybe edit the filenames to something handier. Use the same font-family: 'Roboto Flex';. Note that the unicode-range descriptor means only those fonts required by the document are served to browsers, so it’s no burden to your server to include all six.

To make them even smaller you can drop the opsz axis if you don’t need it, or pin it to a value you like:

https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap

Again we get 6 fonts, split by Unicode range. Here is the Latin font (38 kB):

https://fonts.gstatic.com/s/robotoflex/v9/NaNNepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf3e0O-gn5rrZCu20YNau4OPFu02G5.woff2

If your website is mostly Western European content, then this 38 kB font is all they will need for Roboto Flex with a 100..1000 Weight axis.

Curiously, even though only the wght axis was requested, the font also includes an XOPQ axis, which most users will not need — and dropping it would make the font even smaller. I’ve asked in another place why this happens, and have not understood why it is there. Any thoughts, @davelab6 @anthrotype @sannorozco @rsheeter?