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