Google fonts, montserrat and light

[multichild]

How do you use Google fonts, as I want to use the Montserrat font on my site, but in places I want to use the light version.

So added this to my header:

<link href='http://fonts.googleapis.com/css?family=Montserrat:light' rel='stylesheet' type='text/css'>

Then in my style sheet I have this, is it right?

body{
background-color: #fffefe;
font-family: 'Montserrat', sans-serif;
}

.main {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  font-family: 'Montserrat', light;
}

[Erik_J]

@multichild

font-family: 'Montserrat', light;

Hi,

According to the Googleapis’ font css it should be:

font-family: 'Montserrat Light';

[multichild]

Didnt seem to work, it broke it seemingly as it reverted back to standard font.

In header

<link href='http://fonts.googleapis.com/css?family=Montserrat:Light' rel='stylesheet' type='text/css'>

in style on particular class

.David .firstTitle, .Academy .firstTitle {
  position: absolute;
  top: 35.5%;
  left: 11%;
  font-size: 1.2vw;
  color: #ffffff;
  border-bottom: #ffffff solid 1px;
  letter-spacing: 0.3vmin;
  font-family: 'Montserrat Light';
}

[Noppy]

not sure the url is correct. If you go on google fonts the example seems to use numbers to dictate the font weight. unless i am mistaken?

e.g.

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

not sure how you select the different weights though.

[multichild]

Ye this is what exactly confused me, there a particular version called Light and the graphic designer wants me to use that font. So not sure how if its the font weight values

[Gandalf]

[Erik_J]

What I suggested was not correct I think. The CSS is:

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local('Montserrat Light'), local('Montserrat-Light'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_cJD3gfD_u50.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

The CSS above is already imported with the css link.

Maybe you have a overriding rule in a later css link?

[multichild]

Fantatstic, thank you all.

I didnt realise you needed to use the weights, all good.

[Noppy]

ah the missing part of the puzzle. So obvious when you say it