search

majodev / google-webfonts-helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets
https://gwfh.mranftl.com
MIT License
12.01k stars 420 forks source link

Variable fonts #97

Open phillipseamore opened 4 years ago

phillipseamore commented 4 years ago

It would be great to add support for variable fonts, e.g. https://fonts.google.com/specimen/Inter

mightyiam commented 4 years ago

Google Fonts API docs: https://developers.google.com/fonts/docs/css2#non-standard_weights

We have discovered a way to obtain a CSS that includes variable font files from the Google Fonts API, is to call it with a wght property that is not one of the set of listed weights (200, 300, 400, 500, 600, 700, 800, 900). The font file for that weight will be variable. So, for example, the font file for 200 will not be variable, while the font file for 201 will be variable. Here is an example of a CSS without variable font files:

https://fonts.googleapis.com/css2?family=Inconsolata:wght@200

And here is one with a variable font file:

https://fonts.googleapis.com/css2?family=Inconsolata:wght@201

This is undocumented, but will likely work for a while.

mightyiam commented 4 years ago

Here is the API that the fonts.google.com frontend web client uses to obtain fonts metadata. It provides information regarding which fonts are variable and all the details necessary. But it doesn't seem to be a public API. So, using it means it would probably break at some point. Perhaps it would be best to ask the Google Fonts team for a public API for this.

https://fonts.google.com/metadata/fonts

davelab6 commented 4 years ago

On Tue, Jun 16, 2020, 4:55 AM Shahar Dawn Or notifications@github.com wrote:

Google Fonts API docs: https://developers.google.com/fonts/docs/css2#non-standard_weights

We have discovered a way to obtain a CSS that includes variable font files from the Google Fonts API, is to call it with a wght property that is not one of the set of listed weights (200, 300, 400, 500, 600, 700, 800, 900). The font file for that weight will be variable. So, for example, the font file for 200 will not be variable, while the font file for 201 will be variable. Here is an example of a CSS without variable font files:

https://fonts.googleapis.com/css2?family=Inconsolata:wght@200

And here is one with a variable font file:

https://fonts.googleapis.com/css2?family=Inconsolata:wght@201

This is undocumented, but will likely work for a while.

Kindly, this is a misunderstanding of the documented api.

You should use a range selector to get a variable font. Eg

https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900

If you do @201, you are only guaranteed to get a font which contains that single weight instance. You might get a VF with a wider range today, but it will likely change to be more and more exact to only what you actually requested.

mightyiam commented 4 years ago

That's great. So, that means that it is possible to obtain a variable font. And it could be obtained by the full range (from the lightest weight to the heaviest weight, for example).

The only public API missing is an indication of which fonts are variable.

BTW, there seems to be some rate limiting on that metadata API. So here's the file, just for reference: json.txt