DEV Community

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

Posted on

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.

Top comments (0)