How is font weight supported in CSS for custom fonts?

I have several files for my font:

• Graphik-Black.otf
• Graphik-Bold.otf
• Graphik-Medium.otf
• Graphik-Regular.otf
• Graphik-Semibold.otf
• Graphik-Thin.otf

so in reading https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face I would expect to be able to declare my font like this:

  @font-face {
    font-family: 'Graphik';
    font-weight: 900;
    src: url('/fonts/Graphik-Black.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 700;
    src: url('/fonts/Graphik-Bold.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 500;
    src: url('/fonts/Graphik-Medium.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 400;
    src: url('/fonts/Graphik-Regular.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 600;
    src: url('/fonts/Graphik-Semibold.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik';
    font-weight: 100;
    src: url('/fonts/Graphik-Thin.otf') format('opentype');
  }

and then use it like this:

p {
  fontFamily: 'Graphik';
  fontWeight: 100;
}

or even better:

p {
  fontFamily: 'Graphik';
  fontWeight: thin;
}

but none of this works. I'm told it should be done like this:

  @font-face {
    font-family: 'Graphik-Black';
    src: url('/fonts/Graphik-Black.otf') format('opentype');
  }
  @font-face {
    font-family: 'Graphik-Bold';
    src: url('/fonts/Graphik-Bold.otf') format('opentype');
  }

and:

p { font-family: 'Graphic-Black' }

but that would render the font-weight in the definition irrelevant and just seems wrong to me. how is this supposed to work?

p.s.

this article seems to support my approach but doesn't go far enough in explaining how other weights can be referenced, and in any case I can't make it work: https://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/