DEV Community

Cover image for There is now a better way to use @font-face for variable fonts
Aslam Shah
Aslam Shah

Posted on

1

There is now a better way to use @font-face for variable fonts

When it comes to using variable fonts on the web, there's a newer way to do it.

@font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("BitstreamVeraSerifBold.woff2") format(woff2) tech(variations);
}
Enter fullscreen mode Exit fullscreen mode

Here is the old ( still working ) syntax:

@font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("BitstreamVeraSerifBold.woff2") format("woff2-variations");
}
Enter fullscreen mode Exit fullscreen mode

When using variable fonts with @font-face, it is important to note that the syntax has changed. Instead of using strings, the recommended approach now is to use keywords like woff2, opentype, truetype, woff, and others within the format() function.

It is necessary to consider the font's capabilities such as variable font, color font etc. To determine if a browser supports these font technologies, one can utilize the tech() function. By specifying tech(variations), it ensures that the font file will only be loaded if the browser supports variable fonts.

However, it is worth noting that the new syntax is not yet widely supported. Therefore, it is generally advisable to stick with the old version for now. However, if targeting newer browsers specifically, it may be appropriate to consider updating to the new syntax.

You can read more about browser compatibility and font technologies here.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more