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

This content originally appeared on Manuel Matuzović - 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.

Browser Support: I haven't tested in thoroughly but both functions work on latest Chrome and Firefox on macOS, and Chrome and Firefox on Android. They don't work on Samsung Internet and Safari.

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-01-12T00:00:00+00:00) Day 79: font-tech() and font-format(). Retrieved from https://www.scien.cx/2023/01/12/day-79-font-tech-and-font-format-2/

MLA

" » Day 79: font-tech() and font-format()." Manuel Matuzović | Sciencx - Thursday January 12, 2023, https://www.scien.cx/2023/01/12/day-79-font-tech-and-font-format-2/

HARVARD

Manuel Matuzović | Sciencx Thursday January 12, 2023 » Day 79: font-tech() and font-format()., viewed ,<https://www.scien.cx/2023/01/12/day-79-font-tech-and-font-format-2/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 79: font-tech() and font-format(). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/12/day-79-font-tech-and-font-format-2/

CHICAGO

" » Day 79: font-tech() and font-format()." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/12/day-79-font-tech-and-font-format-2/

IEEE

" » Day 79: font-tech() and font-format()." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/12/day-79-font-tech-and-font-format-2/. [Accessed: ]

rf:citation

» Day 79: font-tech() and font-format() | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/12/day-79-font-tech-and-font-format-2/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

font-tech()

font-format()

Related Posts