Menu
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.
924
You can use smaller font size and make it taller via CSS transform property: font-size: 1.5em; transform: scale(1, 1.5); It's pretty safe to use simple 2D transforms in current days (https://caniuse.com/#feat=transforms2d).
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>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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
