How to change font style on specific page so you don't change the whole thing?

Site URL: https://www.chicagoawakeningchurch.com

Site URL: https://www.chicagoawakeningchurch.com

PW: 0000

Hi,

How do you change font style on one page so you don't change the style from rest of the pages?

For example, if you go into ABOUT -> Our Mission, 

I'm using

Paragraph 1, Heading 4, and Paragraph 2 for my writings.

But I want to change the size, style and line spacing just for this page without messing up the rest of the site.

Also is is possible to make the line spacing between Heading 4 and Paragraph 2 smaller?

Thank you so much in advance!!

You can just create a custom code block on that page and any CSS will only affect that page. Alternatively, you can use collection-ID to target only that page in custom CSS.

#collection-608a2435b153c010dc0b395b is the collection ID of the our mission page.

So something like this on custom CSS will only affect that page:

#collection-608a2435b153c010dc0b395b H4, P {
    font:
    font-size:
}

You can use a chrome extension called squarespace collection/block identifier to find collection and block IDs

Hi @aravsanj

Thank you so much for your reply.

I tried what you said:

/*LEADERSHIP PAGE FONT */
#collection-608a19a8d367fc1b9b3b68bc
h3 {
  font-family: 'nanumgothic', sans-serif !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.8 !important}

/*OUR MISSION PAGE FONT */
#collection-608a2435b153c010dc0b395b 

h3 {
  font-family: 'nanumgothic', sans-serif !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1 !important}

but then when I change h3 style for MISSION PG, h3 style in LEADERSHIP PG also changes.

What am I missing??

Min

20 minutes ago, ChicagoAwakeningChurch said:

Hi @aravsanj

Thank you so much for your reply.

I tried what you said:

/*LEADERSHIP PAGE FONT */
#collection-608a19a8d367fc1b9b3b68bc
h3 {
  font-family: 'nanumgothic', sans-serif !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.8 !important}

 

/*OUR MISSION PAGE FONT */
#collection-608a2435b153c010dc0b395b 

h3 {
  font-family: 'nanumgothic', sans-serif !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1 !important}

 

but then when I change h3 style for MISSION PG, h3 style in LEADERSHIP PG also changes.

What am I missing??

 

Min

Just to be clear, are you using custom CSS or?

@aravsanj

I'm using custom CSS

@ChicagoAwakeningChurch
Maybe that you forgot to use ; at the end.

/*LEADERSHIP PAGE FONT */
#collection-608a19a8d367fc1b9b3b68bc
h3 {
  font-family: 'nanumgothic', sans-serif !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.8 !important;}

 

/*OUR MISSION PAGE FONT */
#collection-608a2435b153c010dc0b395b 

h3 {
  font-family: 'nanumgothic', sans-serif !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1 !important;}

@tuanphan

I'm trying to fix this right now 😞 

I have a similar problem here.

I have a title on the home page `services´ which uses the standard H1 and started with a blank section..

I also have other sections that use pre-designed templates.  They do not use the standard H1/2/3/4.

I would like to get the `services´ title to be the same size as the other titles on this page without affecting the titles on the rest of the site. 

You can see this at ; https://www.valueresonance.space/

In the screenshot attached they look quite similar.  This is becuase I zoomed out to 37% to get both to appear on the screen together.  If you go to the actual URL you can see the `SERVICES´ is much bigger and bolder.

I tried wit this:  

/*SERVICES TITLE FONT */
#collection-28ff22f97cb72389519d
H1 {
  font-family: 'Roc Grotesk', sans-serif !important; font-weight: 600 !important; font-size: 4rem !important; line-height: 1.8 !important;}

But it did not work.

Any help welcome.

Thanks

On 9/5/2023 at 4:21 AM, ValueResonance said:

I have a similar problem here.

I have a title on the home page `services´ which uses the standard H1 and started with a blank section..

I also have other sections that use pre-designed templates.  They do not use the standard H1/2/3/4.

I would like to get the `services´ title to be the same size as the other titles on this page without affecting the titles on the rest of the site. 

You can see this at ; https://www.valueresonance.space/

 

In the screenshot attached they look quite similar.  This is becuase I zoomed out to 37% to get both to appear on the screen together.  If you go to the actual URL you can see the `SERVICES´ is much bigger and bolder.

I tried wit this:  

/*SERVICES TITLE FONT */
#collection-28ff22f97cb72389519d
H1 {
  font-family: 'Roc Grotesk', sans-serif !important; font-weight: 600 !important; font-size: 4rem !important; line-height: 1.8 !important;}

But it did not work.

 

Any help welcome.

 

Thanks

 

 

 

 

Use this code

div#block-28ff22f97cb72389519d h1 {
    font-family: 'Roc Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 4rem !important;
    line-height: 1.8 !important;
}

On 9/6/2023 at 4:03 AM, tuanphan said:

Use this code

div#block-28ff22f97cb72389519d h1 {
    font-family: 'Roc Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 4rem !important;
    line-height: 1.8 !important;
}

Mmm.  There is still something wrong with it.  The code did change the text, but not to the same weight and size.  I looked under styles and it confirmed that they are different, even though they are the same in the code.  

I tested to change weight from 600 to 400 to see what would happen.  No change occurred, so something is preventing the code from being applied.  

If you see it on Moble, the difference is really marked.  There is something wrong with this code.

I left it up with your code so you can see that they are still not the same (Compare the `s´ for example).

Any ideas?

Best wishes