Google font not recognized because name begins with a color-CodePudding

I have a slight issue with my CSS file. I am importing a Google font at the top of my CSS, but the font name begins with "Black". So when I go to use the font in font-family, the CSS identify's it as a color and not the font.

Is there a way to correct this?

CSS File:

@import url('https://fonts.googleapis.com/css?family=Black Han Sans');

.home-header h1{
    font-family: Black Hans Sans;
}

CodePudding user response：

You had a typo in your font-family, it's Black Han Sans, not Hans.

@import url('https://fonts.googleapis.com/css?family=Black Han Sans');

.home-header h1 {
    font-family: Black Han Sans;
}

<div >
  <h1>Black Han Sans</h1>
</div>

Otherwise, you can also wrap the family name in quotation marks.

And this is also good practice according to MDN:

It is a good practice to quote font family names that contain white space, digits, or punctuation characters other than hyphens.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#valid_family_names

@import url('https://fonts.googleapis.com/css?family=Black Han Sans');

.home-header h1 {
    font-family: "Black Han Sans";
}

<div >
  <h1>Black Han Sans</h1>
</div>