Google fonts, montserrat and light

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='' rel='stylesheet' type='text/css'>

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

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

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


According to the Googleapis’ font css it should be:

font-family: 'Montserrat Light';

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

In header

<link href='' 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';

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?


<link href=",400" rel="stylesheet"> 

not sure how you select the different weights though.

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


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( 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?

1 Like

Fantatstic, thank you all.

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


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


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.