htmlcssfont-style

Trouble getting font to display bold on simple webpage


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


Solution

  • 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>