Webstudio
Log in

Join the Webstudio community

Updated 7 months ago

Is support for Variable Fonts planned?

At a glance

The community member who created the post discusses the potential issue of variable fonts bloating file size with traditional hosting. They had to ask the font foundry to remove unused characters and variations. The community members suggest exploring options like only serving the font varieties used in the project, similar to the atomic CSS mindset.

In the comments, another community member notes that variable fonts are supported since the beta launch, but they do not strip unused variations. The community members discuss potential font optimization techniques, such as using the Google Fonts optimization API to get only the subset of characters used on the site, and creating a documentation page to explain the steps. There is also a request for a global library of fonts and other assets in the dashboard, rather than having to add them per individual project.

Useful resources
HHolger
Super powerful concept - in principle - but potentially bloating file size with traditional hosting.

That's at least our experience: You're using just one font file, but it with all its variations is much larger than traditional font pairings. In the end, we had to ask the font foundry to remove characters and variations we clearly won't need.

Maybe the web app paradigm opens other options, such as only serving the font varieties used in the project (similar to atomic CSS mindset).
1
B
H
O
6 comments
BBogdan
Variable fonts are supported since beta launch. But yeah we do not strip unused variations from them.
HHolger
Thank you. Would stripping work? Otherwise 95% of the download remains unused (still the case with our optimized font file).

Implementation: Can one set exposed parameters via font variation settings (weight, italic, decorations) in the GUI?
OOleg Isonen
We need to work on a lot of potential fonts optimizations, for now I recommend using google fonts optimization api and get the subset you actually use on the site, biggest gain you will have is by getting only latin chars

https://developers.google.com/fonts/docs/developer_api#optimization
OOleg Isonen
We should probably create a page in docs explaining the steps for how to optimize the fonts using google api
AAndreaM
If this is already available, lease let me know how to proceed. Is there a way to have a global library of fonts and other assets (icons, background images, etc.) in the dashboard, rather than having to add it per individual project? thanks!
OOleg Isonen
currently per project only
Add a reply
Sign up and join the conversation on Discord