Jump to content

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

Recommended Posts

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?

Screen Shot 2021-04-01 at 2.54.17 PM.png

Link to comment

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

    3. Went to Design>Custom CSS and added the following:

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

 

 
Link to comment
  • 1 year later...
  • 3 weeks later...

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}

Screen Shot 2023-02-01 at 7.18.04 PM.png

Screen Shot 2023-02-01 at 7.18.18 PM.png

Link to comment
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}

Screen Shot 2023-02-01 at 7.18.04 PM.png

Screen Shot 2023-02-01 at 7.18.18 PM.png

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

 

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.