Trouble getting font to display bold on simple webpage

63 views Asked by At

I created a simple article page that uses the Google font, Montserrat for the article's main title. I set the font weight to 700 to make the title appear bold but when displayed on the page, it doesn't appear nearly as bold as it should (compared to the font reference). Here's a link to the sample page I made that illustrates the problem:

https://www.juicehouse.org/ohio-brain-drain.html

1

There are 1 answers

1
José Contreras On BEST ANSWER

I think you are using an outdated format on your link to import the font, as I see in the example you are using the following:

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

But now the way to specify the weight is different:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">

Live demo:

.w700{
  font-family: 'Montserrat';
  font-weight: 700;
}

.w900{
  font-family: 'Montserrat';
  font-weight: 900;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap" rel="stylesheet">

<p class="w700">font-weight: 700</p>
<p class="w900">font-weight: 900</p>