Any reason why Google font is not showing correctly?

PhilK · October 27, 2020

Hi

We're still very much trialling Squarespace with a view to moving our site if it meets our criteria. I'm liking what I see so far especially the option to dive into the CSS and style the site to fit our brand. However I've hit a weird snag that I hope the more experienced Squarespace users might help me understand.

We use the Google font Montserrat. I'm importing that into our trial template and have it working to an extent. In the code below you'll see that I'm importing several weights, but Squarespace doesn't seem to be showing the font weights as I would expect. Weight 600 looks as I'd expect it, 300 (which is called light on the Google font site) is lighter than 600 but definitely not as light as it should be on the Squarespace site and I see no difference at all when I change to weights of 200 or 100. We use these on non Squarespace sites with no problems so I'm slightly confused why they're not showing correctly here.

If anyone has any suggestions or can tell me where I'm going wrong I'd really appreciate it. Screen shot below and CSS below that.

@import url('https://fonts.googleapis.com/css?family=Montserrat:wght@100;200;300;600;700&display=swap');

@font-face{font-family: 'Montserrat', sans-serif;}

h2, h4{
    font-family: "Montserrat", sans-serif;
  padding: 0;
  margin: 1.5em 0 1em;
  color: #000;
  font-weight: 300;
  text-transform: none; 
}

Many thanks

Phil

PhilK · October 27, 2020

Hi Paul,

Mainly because as far as I can tell (and as I mentioned I'm a newbie when it comes to Squarespace) Montserrat on Squarespace only offers two weights (400 and 700) and I'd like to use others. I hoped that by importing it I would have the ability to choose the font weight.

Is it possible that because Squarespace already has Montserrat that it's actually over-riding my import and restricting me to just the 400 and 700? Surely there is a way to over ride that.

Thanks for any help/guidance you can provide.

Phil

scottsummerhayes · December 19, 2020

I'm in the same boat here. Would love some help. Weirdly this code works just fine with 7.0, just not 7.1.

Can anyone else me get Montserrat 800 to work?

Thanks!

Edited December 19, 2020 by scottsummerhayes

scottsummerhayes · December 19, 2020

Woah! I just figured it out.

So here's what I did. I uploaded the font into my Custom Files as you would for any other custom font. Then I used this code to import the font.

@font-face {
    font-family: 'Monsterrat';
    src: url('YourFontLink.ttf');
  }

You have to name your custom font something different than it's real name since Squarespace recognizes the name "Montserrat" from its own library... so I called it "Monsterrat"

And that's it! 🙌

Scott

lestergaddy · December 19, 2020

Your mistake is the CSS with the font-family name, it must match exactly the Google Fonts name.

When you call the Google Fonts API (either by @import or using the <link> on the <head>) you specify the font family name, in this case its (...)?family=Roboto:400,300,100(...) this means you have to use exactly the same name on your font-family declaration; the 400, 300 and 100 font weights must be declared with the CSS property font-weight: 300.

I've set up a CodePen with a working Roboto Example (based on your code).
http://codepen.io/apintocr/pen/fwIDt

Please note how the font-weight is used instead of "Roboto Thin".

The reason it works locally is because you most likely have the Robot Font Family installed on your computer/local server, and in that case it uses the "Roboto Thin" on font-family.

Note on Downvotes I made: I downvoted all the previous answers because they either didn't read the question or it was a general purpose answer from somebody who either didn't know what they were doing or didn't took the time to understand what was the problem. All those answers didn't helped a bit troubleshooting this question.

Any reason why Google font is not showing correctly?

Question

PhilK 2

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

PhilK

PhilK

scottsummerhayes

Posted Images

4 answers to this question

Recommended Posts

PhilK 2

Link to post

scottsummerhayes 2

Link to post

scottsummerhayes 2

Link to post

lestergaddy 0

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources