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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? 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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? 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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? 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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 4 months later...

@chloe123brasier can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 9 months later...

I have uploaded a custom font and am able to use it by selecting H1 H2 etc. Does it show in the list of fonts ?

Also, I want to allocate the font to the header - to the navigation menu but can't see how to.

Thanks

Link to comment
On 1/24/2024 at 6:05 PM, DaveAW said:

I have uploaded a custom font and am able to use it by selecting H1 H2 etc. Does it show in the list of fonts ?

Also, I want to allocate the font to the header - to the navigation menu but can't see how to.

Thanks

No. Custom Font won't show on List of Font in Site Styles, to assign it to an elements, you need to use CSS code.

You can share link to your site + let me know which elements you want to apply custom font, we can give the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.