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

Hi! I want to change the header font on one page of my site only. But I am looking to change it to a custom font or font that is not native to squarespace. How do I do that? 

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.

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?

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;

}

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;
 }
}

Yes that works, thank you so much! How would I go about changing the paragraph type for that page only to a different font too? The font name is Titilium and the url is 

https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/6377acdc56b3050d79ad7236/1668787420203/TitilliumWeb-Regular.ttf

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!

Last thing! How do I not have i affect the font of the footer if possible? It uses the paragraph font so it all changed

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;
 }
}

How do I apply this to the "Cart" text in the header?

@chloe123brasier can you share your website URL?

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

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