# How to differentiate web fonts font-face font-weights?

What do you guys think:

OPTION #1 (same font-face name and change font-weight)

@font-face {
font-family: ProximaNova;
src: url('/fonts/ProximaNova-Regular.ttf');
font-weight: normal;  // THIS IS NORMAL
font-style: normal;
}
@font-face {
font-family: ProximaNova;
src: url('/fonts/ProximaNova-Semibold.ttf');
font-weight: bold;   // THIS IS SEMI-BOLD
font-style: normal;
}
@font-face {
font-family: ProximaNova;
src: url('/fonts/ProximaNova-Bold.ttf');
font-weight: 900;   // THIS IS BOLD
font-style: normal;
}


Then all my elements would use the font-family: ProximaNova and I would control the weight with the font-weight property, using bold and 900 values.

OPTION #2 (change the font-face name itself to control weight):

@font-face {
font-family: ProximaNova;
src: url('/fonts/ProximaNova.ttf');
font-weight: normal;  // ALWAYS NORMAL
font-style: normal;
}
@font-face {
font-family: ProximaNovaSemiBold;   // THIS IS SEMIBOLD
src: url('/fonts/ProximaNova-Semibold.ttf');
font-weight: normal;  // ALWAYS NORMAL
font-style: normal;
}
@font-face {
font-family: ProximaNovaBold;       // THIS IS BOLD
src: url('/fonts/ProximaNova-Bold.ttf');
font-weight: normal;  // ALWAYS NORMAL
font-style: normal;
}


Then I would control the weight by selecting different font-family names, like ProximaNova, ProximaNovaSemiBold and ProximaNovaBold and the font-weight would always be normal.

What would you go for?

• In Option 2 is the third file intended to be '/fonts/ProximaNova-Semibold.ttf' ? – Rounin Feb 3 '20 at 18:13
• @Rounin you're right. The third file should be '/fonts/ProximaNova-Bold.ttf'. I've updated the question. Thanks. – cbdeveloper Feb 3 '20 at 18:15
• Generally I would think the best solution with regard to fonts is the one which involves the downloading of the fewest font files. In both Option 1 and Option 2 you're downloading three font files. Ideally (when you're dealing with the same font and alternate font-weights), if you possibly can, you'll want to download just one font-file. – Rounin Feb 3 '20 at 18:15

Always option 1. That way it will correctly use bold in cases when the browser doesn't support or can't download the fonts.

EDIT: One more point I've noticed just now: Don't use bold (700) for "semi-bold". Most font creators suggest a font-weight value for each variant. Usually it's 600 for "semi-bold" (and 500 for "medium").