Why my CSS custom Google font is not working normal?

Question

I am using Bootstrap 5 and I have embedded the link to google fonts in my html file and I want to change the font-family in css file and it is not working the way I want to! Here's my code:

HTML

<div class="row">
      <div class="col-lg-6 col-md-12">
        <h1 id="entryHeading">Meet new and interesting dogs nearby.</h1>
        <button type="button">Download</button>
        <button type="button">Download</button>
      </div>
      <div class="col-lg-6 col-md-12">
        <img src="images/iphone6.png" alt="iphone-mockup">
      </div>

    </div>

CSS

#entryHeading{
    font-family: "Montserrat-Black" sans-serif;
    font-size: 3rem;
    line-height: 1.5;

}

It is working in a sense that, It is changing my font to Montserrat but I want Montserrat-Black which is not working! Any solution?

Mahinul Mostafa Abid · Answer 1 · 2022-08-18T15:58:20.360

-1

Try adding !important to the font-family. This will overwrite the bootstrap fonts by force.

#entryHeading{
font-family: "Montserrat-Black" sans-serif !important;
font-size: 3rem;
line-height: 1.5;

}

NB: don't try this :) "!important" is bad

edited Aug 18 '22 at 15:58

answered Aug 14 '22 at 18:21

Mahinul Mostafa Abid

11
3

It's not working – Deepak Kumar Aug 15 '22 at 07:48
Careful about unreflected recommendations! --> https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-a-css-property – jasie Aug 18 '22 at 10:44
Always consider the consequences as well as alternatives. --> https://uxengineer.com/css-specificity-avoid-important-css/ – jasie Aug 18 '22 at 10:46
@jasie thank you for pointing out my mistakes. I'll do more detailed research before giving someone advice. :D – Mahinul Mostafa Abid Aug 18 '22 at 15:55

score -1 · Answer 2 · answered Aug 14 '22 at 18:43

-1

You are missing comma ' , ' between font names

CSS

#entryHeading{
    font-family: "Montserrat-Black", sans-serif;
    font-size: 3rem;
    line-height: 1.5;
}

answered Aug 14 '22 at 18:43

sAliMeesam

1
1

It's not working – Deepak Kumar Aug 15 '22 at 07:48

Why my CSS custom Google font is not working normal?

2 Answers2