Use CSS to check for a locally installed font

You can use CSS to check for a locally installed font to use before fetching it remotely.

Remmber the casscade, in this example the user's local copy of "Helvetica Neue Bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "helvetica-neue-bold.ttf" is used instead:

@font-face {
  font-family: Helvetica;
  src: local("Helvetica Neue Bold"), // Full name
       local("HelveticaNeue-Bold"), // Postscript name
       url(./fonts/helvetica-neue-bold.ttf); // Location on server
}

Source

• CodePen
• MDN