Google font Montserrat in chrome no rendering light font-weight

Question

Before posting I searched and unsuccessfully tested different solutions. Chrome is not rendering at all the correct weights for the montserrat family, I have tried different solution as enable/disable the clear type option in win 10, but not of them worked. Anyway I dont wanna solve this issue by changing my s.o. configuration. Everything is correct in edge and firefox.

Any ideas why this is happening?

I am importing the font as:

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900'); /** font-family: 'Montserrat', sans-serif; **/

And using it as:

p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 100; /** 300 didnt work either **/
}

Solution 1

The problems with font-weight and web fonts are known but sadly still not fixed.

Chrome still has some problems with web fonts and its weights.

You probably have the font installed locally and chrome loads it first, instead of using the web font. A possible workaround is deleting the font from your local directory but even if that works, other person with locally installed Montserrat may have the same problems using your website.

More optimal workaround is downloading the font and loading every weight as a different font. Loading a local font in CSS is done with defining it trough @font-face which is used like this

@font-face {
  font-family: 'MontserratLight';
  font-weight: normal;
  src: url('montserrat_light.eot'); 
  src: url('montserrat_light.eot?#iefix') format('embedded-opentype'),
       url('montserrat_light.woff2') format('woff2'),
       url('montserrat_light.woff') format('woff'), 
       url('montserrat_light.ttf')  format('truetype'), 
}

@font-face {
  font-family: 'MontserratRegular';
  font-weight: normal;
  src: url('montserrat_regular.eot'); 
  src: url('montserrat_regular.eot?#iefix') format('embedded-opentype'),
       url('montserrat_regular.woff2') format('woff2'),
       url('montserrat_regular.woff') format('woff'), 
       url('montserrat_regular.ttf')  format('truetype'), 
}

Then you use them as different fonts.

Example

p {
  font-family: 'MontserratLight', sans-serif;
  font-size: 16px;
}

You can read more about @font-face here https://css-tricks.com/snippets/css/using-font-face/

Solution 2

I figured out a slightly easier method where you don't have to host the fonts locally.

First open the google fonts link in a new window - in this case, its:

https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900

Now paste this into a new CSS file. The problem is on the lines beginning with src: where it is specifically asking the browser to look locally for the font files first. You need to remove the local references and just keep the url ones - this will prevent it defaulting to your local copy (worked for me anyway)

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: local('Montserrat Thin'), local('Montserrat-Thin'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUQjIg1_i6t8kCHKm45_QpRxC7mw9c.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

This should save you having to download and host the font files.

Solution 3

I had a similar problem with the Open Sans Google font. For me the solution was adding the following to my css:

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}