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

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

• @supports on MDN
• Day 54: testing for the support of a selector

Do you want to learn even more awesome CSS?

I'm running a workshop with my friends at Smashing Magazine in which I introduce you to the most useful modern features in CSS and show how you can implement them today in your code base to improve scalability, maintainability, and productivity.

Learn more about the workshop!