Custom Google font works only while editing CSS. Reverts to default site font after navigating to a new page.

Site URL: https://robin-khaki-7l6n.squarespace.com/test-styles-page

I've been trying to add a Google font (that is not available on the list of available SquareSpace fonts) using the following CSS: 

@import url('https://fonts.googleapis.com/css?family=Barlow:wght@100&display=swap');

@font-face {font-family: 'Barlow', sans-serif;}

p {font-family:'Barlow'; font-weight: 100;}

While I'm in the midst of editing the custom CSS, the fonts on the page display properly. However, after I save the CSS and navigate to a different page, all the fonts change to a random font (and not even a sans-serif font!). Furthermore, when I inspect the code, it says that the font displayed is Barlow (see screen shot)

Then the weirdest thing: when I navigate back to the Custom CSS area, the fonts change back to the "Barlow" font specified in the CSS. Without me making any changes! Just by navigating to that screen.

Can anyone help?

Hi. What is password?

Thanks Tuan, I just emailed you the password.

Thanks @tuanphan for the solution! Here's what worked:

1. Removed all the CSS above.
2. Edited site footer and added the following in a code block:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@100&display=swap" rel="stylesheet">

p {
    font-family: 'Barlow', sans-serif;
}

@tuanphan Hi! I just emailed you. I am having the same issue. I appreciate the help. 

I am experiencing this same exact issue. Any help is appreciated.

While I'm in the midst of editing the custom CSS, the fonts on the page display properly. However, after I save the CSS and navigate to a different page, all the fonts change to a random cursive handwritten font (and not even a sans-serif font!). 

Then the weirdest thing: when I navigate back to the Custom CSS area, the fonts change back to the "Unbounded" font specified in the CSS. Without me making any changes! Just by navigating to that screen.

Can anyone help?

Here is the current CSS code I am using:

@import url('https://fonts.googleapis.com/css?family=Unbounded:wght@600;700&display=swap');
@font-face{font-family: 'Unbounded', cursive;} 
h1{font-family: 'Unbounded', cursive;}
h2{font-family: 'Unbounded', cursive;}
h3{font-family: 'Unbounded', cursive;}
h4{font-family: 'Unbounded', cursive;}
p.sqsrte-large{font-family: 'Unbounded', cursive;}

.sqs-block-button-element--small{font-family:Unbounded!important;}

s-block-button-element--medium{font-family:Unbounded!important;}

.sqs-block-button-element--large{font-family:Unbounded!important;}

.form-block * {font-family: Unbounded!important}

On 2/2/2023 at 7:18 AM, VinceP13 said:

I am experiencing this same exact issue. Any help is appreciated.

While I'm in the midst of editing the custom CSS, the fonts on the page display properly. However, after I save the CSS and navigate to a different page, all the fonts change to a random cursive handwritten font (and not even a sans-serif font!). 

Then the weirdest thing: when I navigate back to the Custom CSS area, the fonts change back to the "Unbounded" font specified in the CSS. Without me making any changes! Just by navigating to that screen.

Can anyone help?

Here is the current CSS code I am using:

@import url('https://fonts.googleapis.com/css?family=Unbounded:wght@600;700&display=swap');
@font-face{font-family: 'Unbounded', cursive;} 
h1{font-family: 'Unbounded', cursive;}
h2{font-family: 'Unbounded', cursive;}
h3{font-family: 'Unbounded', cursive;}
h4{font-family: 'Unbounded', cursive;}
p.sqsrte-large{font-family: 'Unbounded', cursive;}

.sqs-block-button-element--small{font-family:Unbounded!important;}

s-block-button-element--medium{font-family:Unbounded!important;}

.sqs-block-button-element--large{font-family:Unbounded!important;}

.form-block * {font-family: Unbounded!important}

Don't remove any code in your current code

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=Unbounded:wght@600;700&display=swap" rel="stylesheet">

@tuanphan Can you please help me? I'm building this website and have imported a font from google fonts. 

The testimonial is meant to be in regular italic and looks fine when the CSS panel is in edit mode but once out of the CSS panel, the testimonial goes bold italic. 

Thank you in advance, appriciate all you do 😄 

https://onthemessagev2.squarespace.com/

Password: Password

On 3/7/2023 at 8:32 AM, Maggie90 said:

@tuanphan Can you please help me? I'm building this website and have imported a font from google fonts. 

The testimonial is meant to be in regular italic and looks fine when the CSS panel is in edit mode but once out of the CSS panel, the testimonial goes bold italic. 

Thank you in advance, appriciate all you do 😄 

 

https://onthemessagev2.squarespace.com/

Password: Password

 

Can you send Line 1 code in your screenshot? We can tweak the code easier

On 3/8/2023 at 11:39 PM, tuanphan said:

Can you send Line 1 code in your screenshot? We can tweak the code easier

Thank @tuanphan is this what you're after?

@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:ital,wght@0,400;0,500;0,700;1,900&display=swap');

@font-face {font-family: 'Barlow Semi Condensed', sans-serif;}

On 3/14/2023 at 12:25 PM, Maggie90 said:

 

Thank @tuanphan is this what you're after?

@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:ital,wght@0,400;0,500;0,700;1,900&display=swap');

@font-face {font-family: 'Barlow Semi Condensed', sans-serif;}

Add this code 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=Barlow+Semi+Condensed:ital,wght@1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

and remove this line from Custom CSS

@tuanphan Amazing thank you! It worked 😄