Changing Font ONLY on one page

Site URL: https://www.liamgrahamux.com/seavue-concert-app-1

As the title says, I am trying to change the font for the headers on ONE specific page to more closely match the project I'm trying to display (font is Bebas Neue just in case someone finds that relevant). I am using 7.1 and it seems that the only default option for changing header text changes all instances of that level of header throughout my entire site. Is there an alternative way that will allow me to only change the headers/fonts for one page?

Hi,

You should be able to do this if you're using a custom font family. Using Custom CSS, wrap your elements inside the collection ID for each page that you want to change. You can find the collection ID by using the Squarespace Block Identifier extension available on Chrome or Mozilla, if you haven't installed this already. For the URL that you shared, here's what the final code could look like.

#collection-617848c233fecf2977e89692 {
h1,h2,h3 {
font-family: "CUSTOM_FONT_NAME_HERE" !important;
}
}

1 hour ago, Wolfsilon said:

Hi,

You should be able to do this if you're using a custom font family. Using Custom CSS, wrap your elements inside the collection ID for each page that you want to change. You can find the collection ID by using the Squarespace Block Identifier extension available on Chrome or Mozilla, if you haven't installed this already. For the URL that you shared, here's what the final code could look like.

#collection-617848c233fecf2977e89692 {
h1,h2,h3 {
font-family: "CUSTOM_FONT_NAME_HERE" !important;
}
}

 

One of the main reasons I subscribed to Squarespace was so I could host my portfolio quickly without having to write in a bunch of code, so unfortunately I'm not 100% sure I understand what you mean by "Using Custom CSS, wrap your elements inside the collection ID for each page that you want to change." I downloaded that browser extension to be able to see the part of the code I need to edit, but it doesn't seem to work. 

When I go through Home >Design >Custom CSS I entered the code as such:

#collection-617848c233fecf2977e89692 {
h1,h2,h3 {
font-family: 'Bebas Neue', cursive;
}
}

which for some reason inexplicably ended up looking like Comic Sans despite Bebas Neue being included in the default library..

On 10/27/2021 at 7:10 AM, LiamGUX said:

One of the main reasons I subscribed to Squarespace was so I could host my portfolio quickly without having to write in a bunch of code, so unfortunately I'm not 100% sure I understand what you mean by "Using Custom CSS, wrap your elements inside the collection ID for each page that you want to change." I downloaded that browser extension to be able to see the part of the code I need to edit, but it doesn't seem to work. 

When I go through Home >Design >Custom CSS I entered the code as such:

#collection-617848c233fecf2977e89692 {
h1,h2,h3 {
font-family: 'Bebas Neue', cursive;
}
}

which for some reason inexplicably ended up looking like Comic Sans despite Bebas Neue being included in the default library..

Hi,

Do you still need help?