Guest Posted October 27, 2020 Share Posted 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 Link to comment
Guest Posted October 27, 2020 Share Posted 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 Link to comment
scottsummerhayes Posted December 19, 2020 Share Posted December 19, 2020 (edited) 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 Link to comment
scottsummerhayes Posted December 19, 2020 Share Posted 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 Link to comment
Guest Posted December 19, 2020 Share Posted 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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment