Updates to @font-face

• December 26 2022
• 4 min. read

@font-face has been around for a while and it works fine for the existing monochrome, one file per style, fonts.

CSS Fonts level 4 introduced a new property related to font types (tech()) to the src attribute of @font-face at-rules. I also looked again at the format() attribute of the src descriptor; particularly what benefits would we get from using it.

We will discuss each of these in turn.

format() #

This attribute specifies the font format of the font it is attached to.

If the value for format() is not supported or invalid, the browser will not download the resource, potentially saving bandwidth and improving performance.

If omitted, the browser will always download the font and then detect the format. The font will still work but it may take the browser longer to download and use.

The preferred value type is a keyword, with or without quotes.

The following table shows the following information for each supported format that appears in the specification:

• The quoted string format
• The equivalent quoted syntax
• The font format
• The format name
• Commons extensions associated with the format

Even though format() is not as important as it used to be since most modern browsers support WOFF and WOFF2 fonts, it is still a good habit to get into.

Loading a font and explicitly stating that it's a WOFF2 variable font would look like this:

@font-face {
  font-family: "Recursive";
  src: url("/path/to/recursive.woff2")
    format(woff2)
    tech(variations),
  url("/path/to/recursive.woff")
    format(woff)
    tech(variations);
}

tech() #

This is an optional descriptor that indicates the technologies that the font supports.

The value for this property is one of the following keywords:

• variations
• palettes
• incremental
• features-opentype
• features-aat
• features-graphite
• color-COLRv0
• color-COLRv1
• color-SVG
• color-sbix
• color-CBDT.

The following table shows several old unnormalized format() values and their new equivalent syntax:

Using @support with the new @font-face features #

What I find most intriguing is that we can target font technology and format using @supports.

Testing for specific font technologies #

You can use @supports and the tech() attribute of the src descriptor to test if a browser supports a given font technology.

The list of technologies you can test for is listed in the following table

The syntax for the @supports at rule is:

@supports font-tech(name-of-tech) {
  /*
  Code that supports the
  technology goes here
  */
}

This example imports the Bungee Spice Color V1 font from Google Fonts and will only use in the body element if the browser supports COLRv1 font technology

@import url("https://fonts.googleapis.com/css2?family=Bungee+Spice");

@supports font-tech(color-COLRv1) {
  .bungee-example {
    font-family: "Bungee Spice";
  }
}

Format() #

We use font-format as the value of the feature we're testing with @supports. A list of valid values is show in the following table.

@supports: font-format(woff2) {

}

Edit on Github