This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
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.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-01-11T09:38:54+00:00) Day 79: font-tech() and font-format(). Retrieved from https://www.scien.cx/2023/01/11/day-79-font-tech-and-font-format/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.