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

posted on January 12., 2023

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.

See on CodePen.

Further reading

Want more?

Overview: 100 Days Of More Or Less Modern CSS

My blog doesn't support comments yet, but you can reply via e-mail.