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.

FontPlayground

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.

A composition created in FontPlayground can be opened in CodePen frontend editor which allows you to edit not just CSS, but also JavaScript or HTML code. FontPlayground features its own library of built-in fonts (including Vesterbro, Fit, Input and Roslindale from our storefront).

Vesterbro, Fit, Input and Roslindale in FontPlayground

Wakamai Fondue

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

Typetura first asks questions on how text hierarchy on your website works and then packages all the code font-wise (in CSS, JavaScript, and even react) so that the font gets rendered equally well on as many devices and browsers as possible. For instance, Typetura can introduce to files a script that prevents a browser or software from breaking a variable font into separate styles.

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

BrowserStack and LambdaTest

You can embrace the possibilities of BrowserStack and Lambda Test once your code is ready — they help test how it works on various devices and different browsers. Both tools offer to see how your website will look on different versions of operating systems (such as MacOs Ventura and High Sierra).

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.