Black font is not really "black"

Question

I am building my first website and I would like to use Monserrat Black.

When I'm typing the classic "font-weight: 900; in my CSS file" the result is obviously bolder Thant the "regular", but not as bold as it should be, comparing to what I see when I look at it in, let say Adobe Illustrator (AI).

I have written the following code in the HTML file

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

And this in the CSS (as mentioned in this page : How do I set 'semi-bold' font via CSS? Font-weight of 600 doesn't make it look like the semi-bold I see in my Photoshop file)

{
    font-family: "Montserrat";
    text-align: left;
}

    .titreSection
{
    font-weight: 900; 
}

The font produced in my web browser:

The font as it should appear (screenshot taken in AI):

Is there a way to easily select Black, Thin, Thin Italic, Semibold etc. into CSS ?

Thank you ivre much for you patience, this is my first website...

The color you see in your browser is the default font color, you have to set it up ´color: black;´ — Progs

Bruno Monteiro Bruno Monteiro · Accepted Answer · 2019-07-18T21:43:43

When importing fonts from Google Fonts, you can customize the options you want. Some fonts will have different options. In your case, here is a screenshot of how that "customize" page looks like:

By doing that, your import snippet will be different when you go back to the "Embed" tab. To include the 900 weight, you should import the font like this:

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900&display=swap" rel="stylesheet">

For the second question

"Is there a way to easily select Black, Thin, Thin Italic, Semibold etc. into CSS ?"

by adding the correspondent options in the Google Fonts, you could also set your css with font-weight: bold or font-weight: bolder or font-weight: lighter...

See this link for the full reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Black font is not really "black"

1 Answers