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);
}

Here is the old ( still working ) syntax:

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

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.

Aslam ShahFollow

Creator of https://codedmails.com