CODEWITHSUNDEEP
htmlcssfonts
ekkis
ekkis

Reputation: 10236

How is font weight supported in CSS for custom fonts?

I have several files for my font:

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/

Upvotes: 3

Views: 1524

Answers (1)

ekkis
ekkis

Reputation: 10236

I'm closing this. the answer is: it does work. in my particular case I was mistaken because of using Material UI, which hard-codes specific weights for certain elements. I need to rip MUI out of my project. it's a greater nuisance than help

Upvotes: 1

Related Questions