Using the correct local font name - css

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).