CODEWITHSUNDEEP
csscss-selectors
nothing special
nothing special

Reputation: 65

font-weight not being applied in CSS

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.

Upvotes: 2

Views: 4781

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371231

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

Upvotes: 1

Vishal_VE
Vishal_VE

Reputation: 2137

#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>

Upvotes: 0

user16554867
user16554867

Reputation:

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.

Upvotes: 0

Related Questions