2
\$\begingroup\$

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?

\$\endgroup\$
  • \$\begingroup\$ In Option 2 is the third file intended to be '/fonts/ProximaNova-Semibold.ttf' ? \$\endgroup\$ – Rounin Feb 3 '20 at 18:13
  • 1
    \$\begingroup\$ @Rounin you're right. The third file should be '/fonts/ProximaNova-Bold.ttf'. I've updated the question. Thanks. \$\endgroup\$ – cbdeveloper Feb 3 '20 at 18:15
  • \$\begingroup\$ 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. \$\endgroup\$ – Rounin Feb 3 '20 at 18:15
1
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.