Why my CSS custom Google font is not working normal?-CodePudding

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 >
      <div >
        <h1 id="entryHeading">Meet new and interesting dogs nearby.</h1>
        <button type="button">Download</button>
        <button type="button">Download</button>
      </div>
      <div >
        <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?

CodePudding user response：

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;

}

CodePudding user response：

You are missing comma ' , ' between font names

CSS

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