How to add more font weights (Montserrat font)?

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!

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">

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!

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

On 5/3/2021 at 9:47 PM, tuanphan said:

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

Worked perfectly--thanks!

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?

On 8/17/2021 at 12:55 AM, leflaye said:

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

Hi,

Design > Site Styles doesn't support this?

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

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?

9 minutes ago, tuanphan said:

Hi,

Which code you used for h3?

Hi,

I used:

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

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>

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.

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?

2 hours ago, tuanphan said:

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

Sure, you can check here

On 11/12/2021 at 3:11 PM, diaph said:

Sure, you can check here

Try adding this to Design > Custom CSS

h1, h2 {
    font-family: Montserrat !important;
    font-weight: 500 !important;
}

2 hours ago, tuanphan said:

Try adding this to Design > Custom CSS

h1, h2 {
    font-family: Montserrat !important;
    font-weight: 500 !important;
}

 

Works like a charm. Thanks for your kind help ! 

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

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)