Font Styles in 7.1

Site URL: https://dianestember.squarespace.com/

Is there code that allows to modify individual text styles. The old platform allowed this.

For example, there are 4 levels of headlines. I would like to customize one of them to have all caps and adjust font, weight, spacing and such.

You can add to Custom CSS

h1 {
	font-weight: 700;
	text-transform: uppercase;
}
h2 {
	font-weight: 500;
}

Do similar

Thank you

On 9/3/2020 at 3:30 PM, tuanphan said:

You can add to Custom CSS

h1 {
	font-weight: 700;
	text-transform: uppercase;
}
h2 {
	font-weight: 500;
}

Do similar

Where does the code go?

Would Paragraph styles be P1, P2, etc.?

Hi Tuanphan. I'm trying to change H4 in the code. I want to be able to change all of the options in the font field. The code is working on some but not all. What am I doing wrong? Here is a page I'm testing this on: https://karin.squarespace.com/type-syles 

This is what I did.

h4 {
    family: proxima-nova;
    style: normal;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .7em;
}

try adding !important;

eg: font-size: 10px !important;

On 9/12/2020 at 9:30 AM, tuanphan said:

try adding !important;

eg: font-size: 10px !important;

I know how to do the headings in CSS but how do you do paragraphs style in 7.1? p1 / p2 isnt working like h1 / h2 does. Thanks!

On 7/1/2021 at 10:23 PM, ashleemundywebsitede said:

I know how to do the headings in CSS but how do you do paragraphs style in 7.1? p1 / p2 isnt working like h1 / h2 does. Thanks!

p1 has class

Quote

p.sqsrte-large

p2 has class

Quote

p:not(.sqsrte-large):not(.sqsrte-small)

p3 has class

Quote

p.sqsrte-small

Hi @tuanphan the only one that works for me is the P1 code " p.sqsrte-large "

for some reason I cant get P2 and P3 to individually change with the small and just using p as I have seen. is there any other way to get this to work?

6 hours ago, jenniferboddam said:

Hi @tuanphan the only one that works for me is the P1 code " p.sqsrte-large "

for some reason I cant get P2 and P3 to individually change with the small and just using p as I have seen. is there any other way to get this to work?

Can you share link to a page where you added p1, p2, p3 text? We can check code easier.

p.sqsrte-large      works Thanks! I've been needing an alternate text and didn't want to us an h3-6 and mess up the header hierarchy.