Why won't my google font CDN link allow me to change font weights?-CodePudding

I imported a google font-weight (Raleway) via the CDN and included multiple weights with it. CSS picks up on the font and changes my text properly, but all fonts get changed to the first weight in the CDN.

Here's my CDN:

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500;900&display=swap" rel="stylesheet">

and here's my (extremely simple) CSS:

body {
    font-family: 'Raleway';
    font-weight: 900;
}

CSS seems to completely ignore my font-weight attribute, since all fonts are weight 500 (or whatever weight I put up first in the CDN.)

I'm completely lost and can't figure out what's wrong. I've checked several similar questions but all of them have minor mistakes like importing wrong fonts and whatnot.

Any ideas on what I'm doing wrong? Thanks!

CodePudding user response：

did you try to add !important in your css ?


body {
    font-family: 'Raleway';
    font-weight: 900 !important;
}

CodePudding user response：

I think you have to have a second option to the font-family:

body {
  font-family: Raleway, sans-serif;
}

CodePudding user response：

What you are showing is working perfectly. The problem is elsewhere in your HTML page.

body {
  font-family: 'Raleway';
  font-weight: 900;
  font-size  : 64px;
  }
p.w500 {
  font-weight: 500;
  }

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500;900&display=swap" rel="stylesheet">

<p class="w500"> hello world! 500 </p>

<p >  hello world! 900 </p>