font-weight not being applied in CSS

user_16115107 0
Viewed 278

Anyone know what would explain why font-weight is the only declaration not being applied in this scenario?

HTML

<div id="page_title">
    <h3>Page Title</h3>
</div>

CSS

#page_title {
  color: rgb(90, 190, 190); 
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

For some reason both the color and the family are being applied but not the weight. The div is inside the header tag with no other styles being applied to the header or h3 elements.

EDIT

It is worth mentioning the google font has been imported above the external stylesheet inside the HTML file like so:

<!-- Import Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

It is also worth mentioning that the font-weight can be applied if I target the h3 selector but not the id. So font-weight is working, just not if I use the id.

css-selectors css
3 Answers

The font-weight applied to the h3 by the user agent style sheet is overriding the font-weight cascading from the container (your #page-title).

enter image description here

Try applying the font-weight directly to the h3.

BUT NOTE that the h3 is already bold, and font-weight: 700 is an exact equivalent, so you would not see any difference anyway.

From MDN:

enter image description here

user_35972760

sometimes it's not working so you just import google fonts.

<link href = "https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel = "stylesheet" />

Verify my answer if it's work for you.

Admin1 

#page_title {
  color: rgb(90, 190, 190); 
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}
#page_title h3{
  font-weight: 700;
}
<div id="page_title">
  <h3>Page Title</h3>
</div>

user_164554210
Related