This site runs best with JavaScript enabled.

Use CSS to check for a locally installed font

Kevin Beck

March 12, 2020


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