Google Font - Help

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! 

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;
}

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! 🙂

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';
}