Jump to content

Changing Font ONLY on one page

Recommended Posts

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?

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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

 

Link to comment
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..

Link to comment
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?

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.