13

Google served font like Montserrat has a lot of different styles: Thin, Extra-Light, Light, Regular, etc...

I could not find a way to specify a style with CSS. Using Font-weight can access only some of them as can be seen in this CodePen

<link href='//fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800' 
rel='stylesheet' type='text/css'>

<p class="w100">This is 100 weight</p>

body {
 padding: 0 20px;
 font-family: 'Montserrat';
 font-size:40px;
}

.w100 {
 font-weight: 100;
}

I want to use the Extra-Light style, but regular is the lightest I get.

Is there a straight forward solution to this?

Update: It was a browser problem. My Chrome has issues with fonts. The code i posted works just fine.

3
  • It says hin instead of thin in your first line. But you can remove that anyway - 100 is sufficient. And 100 is also the lightest. If that doesn't work for you, you'll need to look for a different font I guess.
    – domsson
    Mar 1, 2017 at 13:03
  • Fixed the typos, same result. Mar 1, 2017 at 13:29
  • Looking at source of the Google font page they are using @font-face definition for every weight, which I want to avoid as I'd have to link to the specific font files. The links could possibly change in the future breaking stuff. Mar 1, 2017 at 13:32

2 Answers 2

32

The Google fonts page will actually tell you how to do it and includes a weight select utility. If you want the thinnest style, this is it for Montserrat (different fonts have different weights available):

HTML:

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

Compare that to yours, it has redundant weights and two errors (href='// instead of href="https:// and hin instead of thin)

CSS:

font-family: 'Montserrat', sans-serif;
font-weight: 100;

If you want additional weights, add them like this:

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

Remember that you only want to specify those that you are actually going to use, as they will need to be downloaded, hence increasing your page's load time.

Here is a working example for Montserrat. If 100 isn't thin enough for you, you're out of luck.

* {
  font-family: 'Montserrat', sans-serif;
}
.w100 {
  font-weight: 100;
}
.w200 {
  font-weight: 200;
}
.w300 {
  font-weight: 300;
}
.w400 {
  font-weight: 400;
}
<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400" rel="stylesheet">
  </head>
  <body>
    <p class="w100">This is 100 weight</p>
    <p class="w200">This is 200 weight</p>
    <p class="w300">This is 300 weight</p>
    <p class="w400">This is 400 weight</p>
  </body>
</html>

4
  • 1
    Presuming, of course, the additional weights are available.
    – Rob
    Mar 1, 2017 at 13:15
  • I fixed the typos, but the result is the same. You can compare my CodePen example or your code with the Google Font page you will see the difference. Mar 1, 2017 at 13:27
  • @is_this_taken Actually, it looks fine/same to me: imgur.com/a/0xCME Maybe an issue with your browser?
    – domsson
    Mar 1, 2017 at 13:43
  • 1
    Wow, thanks, it seems to be a browser issue. Chrome is having issues. In Firefox it's working fine. Mar 1, 2017 at 13:47
5

After importing the font link from google fonts in your index.html. Create a global.css file consisting css code of Montserrat font family with different font weights.

I'm using this font in my react project.

import or link font from google fonts. Mine looks like this

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
      </style>

It's very useful for you to go through the css file to use each variant in font family.

   .thin {
        /* Montserrat Thin = 100 */
        font-weight: 100;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    .extralight {
        /* Montserrat Extra Light = 200 */
        font-weight: 200;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .light {
        /* Montserrat Light = 300 */
        font-weight: 300;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .regular {
        /* Montserrat Regular = 400 */
        font-weight: 400;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .medium {
        /* Montserrat Medium = 500 */
        font-weight: 500;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .semibold {
        /* Montserrat Semi-bold = 600 */
        font-weight: 600;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .bold {
        /* Montserrat Bold = 700 */
        font-weight: 700;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .extrabold {
        /* Montserrat Extra Bold = 800 */
        font-weight: 800;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }
    
    
    .black {
        /* Montserrat Black = 900 */
        font-weight: 900;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.