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?