Using the correct local font name

Question

As a small optimisation technique I want to serve the 'Avenir Next - Regular' font locally via css (so if a user has this font locally it will use it rather than download a woff2/woff/etc).

This font, for example, has been in IOS since version 6 so it's a quick win.

However I am not sure how to specify the local font name in the css stack? Do I need the word regular? Is there a program that would help?

@font-face {
  font-family: 'Avenir';
  src: local("Avenir Next Regular"), /* THIS? */
       local("Avenir-Next-Regular"), /* THIS? */
       local("Avenir-Next"),         /* SOMETHING ELSE? */
       url('/fonts/AvenirNextLTW04Regular.woff2') format('woff2'),
       url('/fonts/AvenirNextLTW04Regular.woff') format('woff'),
       url('/fonts/AvenirNextLTW04Regular.ttf') format('truetype');
}

Do I need to specify a font weight to get the 'regular' version? And then is there a way in devtools to see if it works? I presume not seeing a call to an external font file means success?

Answer 1

You should use the correct font name as defined in the font file. If you are on Windows you can install Microsoft's Font properties extension. When installed, you just right click the font file and select Properties. There you will find extra tabs with the font's info. One of them will show the fonts name.

I guess it will be like this:

@font-face {
    font-family: 'Avenir Next - Regular';
    src: local('Avenir Next'),
         url('/fonts/AvenirNextLTW04Regular.woff2') format('woff2'),
         url('/fonts/AvenirNextLTW04Regular.woff') format('woff'),
         url('/fonts/AvenirNextLTW04Regular.ttf') format('truetype');
}

Answer 2

The font family reflects the base name of a font, while the variants are the children (font faces) and are defined by weight (e.g. Regular, Bold) and style (normal & italic). When defining custom @font-faces, make sure to define a common font-family, so that font-weight and font-style gets applied properly and the font-face switches accordingly within the same font family.

There is no official naming convention for the various font faces themselves, but most fonts do follow this this pattern: [Font Name] [Weight?] [Italic?]

The names for the common weights are usually Thin, ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold and Black. However, some fonts may introduce an extra space in the Extra-variants or substitute Semi with Demi. More about the possible names can be found here.

Minor common exception: For the default 400-weight font, the name usually is Font Name Regular, while the weight is left out of the italic variant: Font Name Italic

Here is a table of possible font names for the imaginary font family Cool Font:

Weight	Style	Likely name
100	normal	Cool Font Thin
200	normal	Cool Font ExtraLight
300	normal	Cool Font Light
400	normal	Cool Font Regular
500	normal	Cool Font Medium
600	normal	Cool Font SemiBold
700	normal	Cool Font Bold
800	normal	Cool Font ExtraBold
900	normal	Cool Font Black
100	italic	Cool Font Thin Italic
200	italic	Cool Font ExtraLight Italic
300	italic	Cool Font Light Italic
400	italic	Cool Font Italic
500	italic	Cool Font Medium Italic
600	italic	Cool Font SemiBold Italic
700	italic	Cool Font Bold Italic
800	italic	Cool Font ExtraBold Italic
900	italic	Cool Font Black Italic

Keep in mind, that your font family might diverge from this table, so it is always best to check the font itself.

Example: Assuming the entire family of Cool Font consists of an (italic) Regular and Bold font face sharing the naming convention described above, the correct definition could be:

@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font Regular'),
       url('Cool_Font_Regular.woff2') format('woff2'),
       url('Cool_Font_Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font Bold'),
       url('Cool_Font_Bold.woff2') format('woff2'),
       url('Cool_Font_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font Italic'),
       url('Cool_Font_Italic.woff2') format('woff2'),
       url('Cool_Font_Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font Bold Italic'),
       url('Cool_Font_Bold_Italic.woff2') format('woff2'),
       url('Cool_Font_Bold_Italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

If you don't know the correct variant name of a font, you can always define multiple local variants without any downsides:

@font-face {
  font-family: 'Cool Font';
  src: local('Cool Font SemiBold'),
       local('Cool Font Semi Bold'),
       local('Cool Font DemiBold'),
       local('Cool Font Demi Bold'),
       url('Cool_Font_SemiBold.woff2') format('woff2'),
       url('Cool_Font_SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

Answer 3

When you don't want to let the user download a font and let it use the 'Avenir Next - Regular' font, you should put this font first in line in the font-declaration. Look into your own fonts for the exact name and set (only):

font-family: "Avenir Next - Regular", Arial, Helvetica, "sans-serif";

But check if 'Avenir Next - Regular' is so widely local available (not likely, because it is an expensive font).