Jump to content

Change Fonts on Each Page (Decouple Pages)

Recommended Posts

Hi there!

I would like to change the fonts on each of my pages. Can anyone tell me how I can accomplish this using CSS or any other tool?

In other words, i want to achieve that, if I change the font on one page, it does NOT change on all other pages as well.

Thank you VERY much and keep safe during this troubled time x!

PS: I`ve never used a CSS code before so I would require a simple explanation so I can understand it. 😀

Link to comment
3 hours ago, Elena_95 said:

Hi there!

I would like to change the fonts on each of my pages. Can anyone tell me how I can accomplish this using CSS or any other tool?

In other words, i want to achieve that, if I change the font on one page, it does NOT change on all other pages as well.

Thank you VERY much and keep safe during this troubled time x!

PS: I`ve never used a CSS code before so I would require a simple explanation so I can understand it. 😀

Hi , You can do this easily as each individual page has a header in which you can use the CSS Let me send you sample code which you can use in page headers. You can use the following code in Page headers to get it done 🙂 

<style>
 h1{
   font-family:'Raleway !important'; 
  }
  h2{
   font-family:'Playfair Display !important'; 
  }
  h3{
   font-family:'Playfair Display !important'; 

  }
  p{
       font-family:'Raleway !important'; 
  }
</style>

Instead of playfair display , raleway etc you can type in the font name you want to use. 

To get it working you have to Click on Gear icon in from of page name (screenshot attched) it will pop up the menu then go to Advance then paste the code in the space(pic attahced)

 

Hope it Helps.

 

s1.PNG

s2.PNG

Link to comment
  • 2 weeks later...

Hi there!

I wanted to get back to you because the code you gave me did not work unfortunately. It just set my whole page back to a font I never used before (Times New Roman). However, I did enter the fonts I wanted to use in the brackets as you told me.

Can you think of any other way to solve this problem?

Thank you so so much! :)

Link to comment
  • 11 months later...

Hey Elena,

Hopefully this isn't too late/helps someone else:

<style>
 h1{
   font-family: roboto!important; 
  }
  h2{
   font-family: roboto!important; 
  }
  h3{
   font-family: roboto!important; 
  }
  p{
       font-family: roboto!important; 
  }
</style>

This works. You can change Roboto for any font of your choice.

Link to comment
  • 2 weeks later...
On 3/12/2021 at 1:25 AM, toledofredo said:

Hey Elena,

Hopefully this isn't too late/helps someone else:

<style>
 h1{
   font-family: roboto!important; 
  }
  h2{
   font-family: roboto!important; 
  }
  h3{
   font-family: roboto!important; 
  }
  p{
       font-family: roboto!important; 
  }
</style>

This works. You can change Roboto for any font of your choice.

Hi. You can shorten this code to this

<style>
 h1, h2, h3, p{
   font-family: roboto!important; 
  }
</style>

 

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
  • 1 year later...
On 11/4/2022 at 10:19 AM, daniellehartland said:

How do we know which fonts are available to use?

 

Design > Site Styles > Fonts, you can see all Squarespace Fonts.

In case SS doesn't support your case, you can use font font Google Fonts, Adobe Font...

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.