Why CSS font-size doesn't change?

Question

 .navbar-brand{ font-weight: bold; font-family: "Ubuntu"; font-size: 2.5rem; }

 <a class="navbar-brand" href="">tindog</a>

So this is how I try to change the font-size for my link through a certain class and I came across something strange that everything has changed whether it is font-family or font-weight which means that I define the class in index.html correctly and in the css file I am doing it right,. But the size does not change, someone explain to me what could be the problem. THANKS!!

Answer 1

Try using font sizes in pixels and use CSS media queries to control the font sizes according to the screen width.

If you use rem, you need to set the font size to the parent element and from the parent element the rem value changes accordingly.

For example, if you set the font size of your parent element to 10px and set the font size of the child element to 2rem, then the actual font size of the child element will be 20px since it calculates it from the font size of the parent element.

Answer 2

I tested your code and there is nothing wrong with it. Try to change the font size using pixels instead.

.navbar-brand {
font-weight: bold;
font-family: "Ubuntu";
font-size: 40px;
}

Since 1rem = 16px.

Answer 3

Try this code:

.navbar-brand{
  font-weight: bold;
  font-family: "Ubuntu";
  font-size: 2.5rem !important;
}