We have already reported on how variable fonts work and what tools designers could use to properly present such fonts or look into what they can offer. But it’s not only designers who deal with variable fonts, but also web developers who are supposed to embed a font into a layout. There are special tools to make their work process easier, too. Those tools enable to look into values of the styles one needs, check on what devices the font will be properly rendered, and even help embed color fonts.
This project by Wenting Zhan and Hua Shu is largely inspired by Axis Praxis, but looks more up-to-date. The FontPlayGround can also be used to create a landing page combining a number of variable axes in different frames. A special tab displays a CSS code of this landing page, which you can copy and import to a website. You can copy the values for the entire page as well as for its individual elements.
Vesterbro, Fit, Input and Roslindale in FontPlayground
Wakamai Fondue by Roel Nieskens allows you to open just one font, but reveals everything about it: it shows all static styles, the entire character set and even color palettes if it’s a color font (we explained how color fonts work here).
A new Wakamai Fondue beta version lets you choose how many variable axes you intend to apply in your layout, what OpenType features you need to turn on by default and which features you have to turn off (this may be helpful when dealing with a website in Bulgarian Cyrillic, for example, as its glyphs are only available as a feature).
At the end of a long list of customisable blocks, Wakamai Fondue features a field with CSS code, which can be copied and inserted into a layout.
You can drop to Wakamai Fondue any file, open one of Google Fonts or test a font of the day made available by a designer friend (such as David Jonathan Ross).
Spektra in Wakamai Fondue
Typetura doesn’t offer its users to manage variable axes within the tool. However, it takes just one click to switch to the code editor, CodePen or CodeSandbox, in the Typetura interface.
Typeture in CodePen
You can embrace the possibilities of BrowserStack and Lambda Test once your code
The tools virtually repeat each other, but BrowserStack is a better choice for developers who have to test small websites, while Lambda Test is an option for a team managing one large product which gets regularly updated.
LambdaTest and BrowserStack run on subscriptions, but you can check whether a specific browser, operating system or a device you’re considering supports variable fonts, for free on their websites.
Maregraphe Variable on Galaxy S10e via BrowserStack
P. S. Check if you need a license for a font before embedding it into your layout. You can do this either on the font author’s website or in FontPlayground and Wakamai Fondue tools.