Jump to content

How to add more font weights (Montserrat font)?

Recommended Posts

Currently, Squarespace only allows you to choose between 400 and 700 for the Montserrat typeface. When I use the CSS editor and type in "h1 {font-family: "Montserrat"; font-weight: 600;}, it either changes it to 700, or 400 if I put type in "500". 

How do I enable Squarespace to allow more font weights for Montserrat?

Thanks!

Link to comment
On 4/18/2021 at 2:22 AM, roem said:

Currently, Squarespace only allows you to choose between 400 and 700 for the Montserrat typeface. When I use the CSS editor and type in "h1 {font-family: "Montserrat"; font-weight: 600;}, it either changes it to 700, or 400 if I put type in "500". 

How do I enable Squarespace to allow more font weights for Montserrat?

Thanks!

Add this to Settings > Advanced > Code Injection > Header. 

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 5/2/2021 at 11:52 PM, roem said:

Hi @tuanphan,

Thanks for the response. Is there a way to do this without Header Code Injection? I don't have a business plan.

Thanks!

Edit your Site Footer >> Add a Code Block >> paste above code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
  • 2 months later...
On 4/19/2021 at 6:20 AM, tuanphan said:

Add this to Settings > Advanced > Code Injection > Header. 

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

 

how would i do this with the Helvetica Neue font? simply swap the links + 'Monsterrat' for 'Helvetica-Neue' i assume?

Link to comment
  • 2 months later...

Hi, I'm struggling with the same issue but can't find the solution following the steps you provided above. Should I choose another font in the design panel than Montserrat to be able to access other font weight ? So far my css code doesn't change anything. (the header has been correctly already updated).

Thanks in advance

Edit: h3 is working great with the css code above, but not h1 and h2 ..

Edited by diaph
Link to comment
On 11/1/2021 at 7:56 PM, diaph said:

Hi, I'm struggling with the same issue but can't find the solution following the steps you provided above. Should I choose another font in the design panel than Montserrat to be able to access other font weight ? So far my css code doesn't change anything. (the header has been correctly already updated).

Thanks in advance

Edit: h3 is working great with the css code above, but not h1 and h2 ..

Hi,

Which code you used for h3?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/4/2021 at 3:27 PM, diaph said:

 

Hi,

I used:

h3 {
  font-family: Montserrat;
  font-weight: 500;
}

try

h3 {
  font-family: Montserrat;
  font-weight: 500 !important;
}

If it still doesn't work, add this to Settings > Advanced > Code Injection > Header

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;1,500;1,600&display=swap" rel="stylesheet">
<style>
  h3 {
  	font-family: 'Montserrat', sans-serif;
    font-weight: 500 !important;
  }
</style>

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/7/2021 at 3:07 AM, tuanphan said:

try

h3 {
  font-family: Montserrat;
  font-weight: 500 !important;
}

If it still doesn't work, add this to Settings > Advanced > Code Injection > Header

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;1,500;1,600&display=swap" rel="stylesheet">
<style>
  h3 {
  	font-family: 'Montserrat', sans-serif;
    font-weight: 500 !important;
  }
</style>

 

Thanks for your feedback.

Actually sorry if I badly expressed myself, the h3 css code your provided to OP last April was working well from the beginning . It's only h1 and h2 that are not working.

Link to comment
On 11/10/2021 at 3:09 PM, diaph said:

Thanks for your feedback.

Actually sorry if I badly expressed myself, the h3 css code your provided to OP last April was working well from the beginning . It's only h1 and h2 that are not working.

Can you share link to page where h1, h2 doesn't work?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...
On 4/19/2021 at 10:20 PM, tuanphan said:

Add this to Settings > Advanced > Code Injection > Header. 

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

 

Hey @tuanphan should this advanced code snippet add the additional weights as options to the site styles menu or do you also need to add CSS for each header to get it to work? Thanks

Link to comment
20 hours ago, melaniejaane said:

Hey @tuanphan should this advanced code snippet add the additional weights as options to the site styles menu or do you also need to add CSS for each header to get it to work? Thanks

SS supports some font weight only. This code, use when you use custom code. More font weights won't appear Site Styles (No way to add more options to Site Styles with code)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.