How to use specific font styles with CSS, from Google fonts (ie. thin, extra-light..)

Asked 1/3, 2017 at 13:1 Answered 7/6 at 12:3

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.

Mousterian answered 1/3, 2017 at 13:1 Comment(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. – Dub 1/3, 2017 at 13:3

Fixed the typos, same result. – Mousterian 1/3, 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. – Mousterian 1/3, 2017 at 13: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>

Dub answered 1/3, 2017 at 13:10 Comment(6)

Presuming, of course, the additional weights are available. – Zebulen 1/3, 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. – Mousterian 1/3, 2017 at 13:27

@Mousterian Actually, it looks fine/same to me: imgur.com/a/0xCME Maybe an issue with your browser? – Dub 1/3, 2017 at 13:43

Wow, thanks, it seems to be a browser issue. Chrome is having issues. In Firefox it's working fine. – Mousterian 1/3, 2017 at 13:47

This is outdated, I have added an updated answer – Subtle 7/6 at 12:4

@Cloud: agreed, it's using the old API (v1) but it's still working in 2024 – Idealize 7/6 at 16:31

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;
    }

Resource answered 29/11, 2020 at 1:28 Comment(0)

The current answer is outdated, now the syntax is:

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

OR for multiples:

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

Subtle answered 7/6 at 12:3 Comment(0)

Recommended topics

Hot tags