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-Semibold.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\$

Your Answer

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

Browse other questions tagged or ask your own question.