Check If Font Is Installed Locally

You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.

  1. @font-face {
  2.   font-family: "Dank Mono";
  3.   src:
  4.     /* Full name */
  5.     local("Dank Mono"),
  6.     /* Postscript name */
  7.     local("Dank Mono"),
  8.     /* Otherwise, download it! */
  9.     url("//...a.server/fonts/DankMono.woff");
  10. }
  12. code {
  13.   font-family: "Dank Mono", system-ui-monospace;
  14. }

H/T to Adam Argyle for sharing this protip and demo.