Jump to content

How do I change the font style of headers to a custom font style on one page of squarespace website?

Recommended Posts

You'll need to upload the custom font into the Custom CSS, then load it and apply it the the navigation links on a page using the page collection ID. 

You can follow these steps to upload the font:
https://squarefortytwo.com/squarespace-guides/custom-fonts-on-squarespace-71

This guide for finding the IDs:
https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

And if you share your website URL I can help you with the CSS to adjust the navigation links.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

So I've been trying this but it still changes the font for the whole website but I only need it for the individual page. Here is what I have been putting into the CSS and this changes the whole website: 

@font-face {

font-family: 'Formula1';

src: url(https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/63767accfcb9634505258f55/1668709068391/Formula1-Display-Bold_web.otf)

}

h1 {

font-family: 'Formula1', alternative-web-safe-font;

}

h2 {

font-family: 'Formula1', alternative-web-safe-font;

}

h3  {

font-family: 'Formula1', alternative-web-safe-font;

}

h4  {

font-family: 'Formula1', alternative-web-safe-font;

}

I have the squarespace ID but where do I apply that in the custom CSS section? Putting it on line one gives me a syntax error. And I am unable to share the page because it is currently locked on the front end and cannot be shared to public right now. Can i send it to you hidden somehow?

Link to comment

I have also tried

[data-section-id="6374402e01adbf47b9288afd"]  *

@font-face {

font-family: 'Formula1';

src: url(https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/63767accfcb9634505258f55/1668709068391/Formula1-Display-Bold_web.otf)

}

#collection-637435e976f4ab38edc23c21 *

h1 {

font-family: 'Formula1', alternative-web-safe-font;

}

h2 {

font-family: 'Formula1', alternative-web-safe-font;

}

h3  {

font-family: 'Formula1', alternative-web-safe-font;

}

h4  {

font-family: 'Formula1', alternative-web-safe-font;

}

Link to comment

Try this:

@font-face {
 font-family: 'Formula1';
 src: url('https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/63767accfcb9634505258f55/1668709068391/Formula1-Display-Bold_web.otf')
}

#collection-637435e976f4ab38edc23c21 {
 h1, h2, h3, h4 {
  font-family: 'Formula1', sans-serif;
 }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Very similar to what you already have, just adjust for the new font and targeting paragraphs:

@font-face {
 font-family: 'Titilium';
 src: url('https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/6377acdc56b3050d79ad7236/1668787420203/TitilliumWeb-Regular.ttf')
}

#collection-637435e976f4ab38edc23c21 {
 p, .sqsrte-small, .sqsrte-large {
  font-family: 'Titilium', sans-serif;
 }
}

Give me a thumbs up if that helped, thanks!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Change to this:

@font-face {
 font-family: 'Titilium';
 src: url('https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/6377acdc56b3050d79ad7236/1668787420203/TitilliumWeb-Regular.ttf')
}

#collection-637435e976f4ab38edc23c21 {
 #page p, #page  .sqsrte-small, #page  .sqsrte-large {
  font-family: 'Titilium', sans-serif;
 }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.