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.
Further reading
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.