roem Posted April 17, 2021 Share Posted April 17, 2021 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
tuanphan Posted April 19, 2021 Share Posted April 19, 2021 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"> oswhytecodes 1 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
roem Posted May 2, 2021 Author Share Posted May 2, 2021 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! Link to comment
tuanphan Posted May 4, 2021 Share Posted May 4, 2021 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 oswhytecodes and roem 1 1 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
roem Posted May 21, 2021 Author Share Posted May 21, 2021 On 5/3/2021 at 9:47 PM, tuanphan said: Edit your Site Footer >> Add a Code Block >> paste above code Worked perfectly--thanks! Link to comment
Guest Posted August 16, 2021 Share Posted August 16, 2021 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
tuanphan Posted August 18, 2021 Share Posted August 18, 2021 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? 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
diaph Posted November 1, 2021 Share Posted November 1, 2021 (edited) 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 November 1, 2021 by diaph Link to comment
tuanphan Posted November 4, 2021 Share Posted November 4, 2021 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
diaph Posted November 4, 2021 Share Posted November 4, 2021 9 minutes ago, tuanphan said: Hi, Which code you used for h3? Hi, I used: h3 { font-family: Montserrat; font-weight: 500; } Link to comment
tuanphan Posted November 7, 2021 Share Posted November 7, 2021 (edited) 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 November 7, 2021 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
diaph Posted November 10, 2021 Share Posted November 10, 2021 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
tuanphan Posted November 12, 2021 Share Posted November 12, 2021 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
diaph Posted November 12, 2021 Share Posted November 12, 2021 2 hours ago, tuanphan said: Can you share link to page where h1, h2 doesn't work? Sure, you can check here Link to comment
tuanphan Posted November 14, 2021 Share Posted November 14, 2021 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; } diaph 1 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
diaph Posted November 14, 2021 Share Posted November 14, 2021 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 ! Link to comment
melaniejaane Posted October 3, 2022 Share Posted October 3, 2022 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
tuanphan Posted October 4, 2022 Share Posted October 4, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment