Jump to content

Any reason why Google font is not showing correctly?

Recommended Posts


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



Link to comment
  • Replies 4
  • Views 4.7k
  • Created
  • Last Reply

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.


Link to comment
  • 1 month later...

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! 🙌


Link to comment

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).

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.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.