Jump to content

Google Font - Help

Recommended Posts

Site URL: https://www.hexagency.co.uk/

Hi Guys, 

I am trying to add a Google font to my site (site wide) and have followed a guide I found online using the below code, but it isn't working 😞
Could someone please advise if I'm missing something?

Code injection:
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');
</style>

Custom CSS:
p.sqsrte-small, p, p.sqsrte-large, h1, h2, h3, h4 {font-family: 'Manrope', sans-serif;}

Thanks in advance for your help! 

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Add this code to 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=Manrope:wght@400;700&display=swap" rel="stylesheet">

then add this code to Design > Custom CSS

p, h1, h2, h3, h4 {
font-family: 'Manrope', sans-serif !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 12/25/2021 at 9:01 AM, tuanphan said:

Add this code to 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=Manrope:wght@400;700&display=swap" rel="stylesheet">

then add this code to Design > Custom CSS

p, h1, h2, h3, h4 {
font-family: 'Manrope', sans-serif !important;
}

 

Thanks a lot tuanphan, was the code I used out dated or something so didn't work on all browsers?
Is there a way to use this font (manrope) for the menu options in the header too?

Also, where it says 'Hello, we are… Hex Agency.' Is there a way to change the words 'Hex Agency' to the Google font Playfair, or is it not possible to have different fonts within the same text box on Squarespace? 
We were thinking of using this as an accent font. 

Thanks again for your help! 🙂

Link to comment

Not sure, I also sometime have problem when using @import, so I usually <link rel

Use somecode like this

/* Hex agency */
div#block-yui_3_17_2_1_1639580245530_2026 em {
    font-family: 'POPPINS';
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.