Day 79: font-tech() and font-format()

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

You can use the @supports rule to check whether a browser supports a specified font technology or font format.

font-tech()

The font-tech() function checks whether a browser supports the specified font technology. For example, you can apply styles only if the browser supports font-palettes or if it doesn't support incremental font loading (I have no idea what that is).

<div class="palette" hidden>
  Your browser supports font palettes 🎉
</div>

<div class="incremental" hidden>
  Your browser doesn't support incremental font loading 😭
</div>
@supports font-tech(palettes) {
  .palette {
    display: block;
  }
}

@supports not font-tech(incremental) {
  .incremental {
    display: block;
  }
}

You can find a list of font technologies on MDN.

font-format()

The font-format() function checks whether a browser supports the specified font format. For example, you can apply styles only if the browser supports
.woff2.

<div hidden>
  Your browser supports woff2 🎉
</div>
@supports font-format(woff2) {
  div {
    display: block;
  }
}

You can find a list of font formats on MDN.

Browser Support: I haven't tested in thoroughly but both functions work on latest Chrome and Firefox on macOS, and Chrome and Firefox on Android. They don't work on Samsung Internet and Safari.

See on CodePen

Further reading

Overview: 100 Days Of More Or Less Modern CSS