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.