Change Fonts on Each Page (Decouple Pages)

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. 😀

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.

Hi! Thank you so much for your help, I will try your solution just now and hope it does work out

Have a good one 😊

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! :)

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.

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>

How do we know which fonts are available to use?

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