Updates to @font-face (part 2) (2023)

• October 11 2023
• 4 min. read

@font-face has been around for a while and it works fine for the existing monochrome, one file per style fonts that we've been using so far.

CSS Fonts level 4 introduced two new properties to the src attribute the of @font-face at-rule. These attributes are tech() and format().

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 equivalen unquoted 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 all modern browsers support WOFF2 fonts, it is still a good habit to get into.

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

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() #

tech() is an optional descriptor that indicates the technologies that the font supports. This is particularly useful when working with color fonts since there different browsers support different color font formats.

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

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 listen the table for the tech() descriptor discussed earlier

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

We use font-format as the value of the feature we're testing with @supports. A list of valid values is shown in the table under format() discussed earlier.

@supports: font-format(woff2) {}

We can also combine the (font-format()) and tech() descriptors to test if the browser supports variable fonts in a given format.

@supports: (font-format(woff2) and tech(variations)) {}

Edit on Github