Font CCS not working

One set of my custom fonts are working just fine, but the other is not. The font I am trying to set is for my H3,H4, and Paragraphs. I have it working in the header and newsletter block, but not elsewhere. Password is Espresso. Here is the code I have:

@font-face {    
font-family: 'Mr Eaves XL';       
src: url(https://static1.squarespace.com/static/6500be4e60391b0534a335c5/t/6500c8ad47e5c0246810684d/1694550190183/MrEavesXLModOT-Light.ttf);}

H3{font-family:'Mr Eaves XL'; size:17px
!important}
H4{font-family:'Mr Eaves XL'; size:15px !important}
P1 {font-family:'Mr Eaves XL'; size: 15px !important}
P2 {font-family:'Mr Eaves XL'; size: 12px !important}
P3 {font-family:'Mr Eaves XL'; size: 10px !important}

P1 P2 and P3 are not selectors for the paragraphs, you need to use these instead:

// Paragraphs

// Paragraph 1
.sqsrte-large {
   font-family: 'font name here';
}

// Paragraph 2
p {
   font-family: 'font name here';
}

// Paragraph 3
.sqsrte-small {
   font-family: 'font name here';
}

@mappdesigns Just a heads up that "p" targets all paragraph fonts. 

• p.sqsrte-large (p1)
• p (all paragraph fonts)
• p:not(.sqsrte-large):not(.sqsrte-small) (p2)
• p.sqsrte-small (p3)

8 minutes ago, WCS said:

@mappdesigns Just a heads up that "p" targets all paragraph fonts. 

This hasn't actually been my experience, not since the backend change to how fonts are handled. In a quick test on 7.1 FE, p only affects the paragraph 2 font:

@Ziggy  Whatttt that's exciting! Thanks for letting me know.

Just now, WCS said:

@Ziggy  Whatttt that's exciting! Thanks for letting me know.

It is a bit odd though, that the 3 paragraph fonts are targeted with  p ,  .sqsrte-small  and  .sqsrte-large

Thanks everyone!

How about custom font CCS for Blog titles in summary page and in the post  as well as product titles on Summary pages?

Can you share your website URL and that page?

https://sparrow-blackbird-g9fk.squarespace.com/

Password: Espresso

Blog Page and Shop Page

4 hours ago, mappdesigns said:

One set of my custom fonts are working just fine, but the other is not. The font I am trying to set is for my H3,H4, and Paragraphs. I have it working in the header and newsletter block, but not elsewhere. Password is Espresso. Here is the code I have:

@font-face {    
font-family: 'Mr Eaves XL';       
src: url(https://static1.squarespace.com/static/6500be4e60391b0534a335c5/t/6500c8ad47e5c0246810684d/1694550190183/MrEavesXLModOT-Light.ttf);}

H3{font-family:'Mr Eaves XL'; size:17px
!important}
H4{font-family:'Mr Eaves XL'; size:15px !important}
P1 {font-family:'Mr Eaves XL'; size: 15px !important}
P2 {font-family:'Mr Eaves XL'; size: 12px !important}
P3 {font-family:'Mr Eaves XL'; size: 10px !important}

Where did you get the url for the font Mr. Eaves XL since it's already a font loaded in squarespace?  I'm trying to make a certain text block a different font (Shelby) that's already an option in squarespace, but every tutorial I've found shows you how to get the url for uploaded fonts.

10 hours ago, mappdesigns said:

https://sparrow-blackbird-g9fk.squarespace.com/

Password: Espresso

Blog Page and Shop Page

Here you go:

// Blog grid title
.blog-basic-grid .blog-title {
  font-family:'sisterhood' !important;
}
// Blog item title
.blog-item-wrapper .blog-item-title h1.entry-title {
  font-family:'sisterhood' !important;
}
// Blog Pagination title
.item-pagination-link .item-pagination-title {
  font-family:'sisterhood' !important;
}

Drop me a like if that works.

9 hours ago, Juliaa said:

Where did you get the url for the font Mr. Eaves XL since it's already a font loaded in squarespace?  I'm trying to make a certain text block a different font (Shelby) that's already an option in squarespace, but every tutorial I've found shows you how to get the url for uploaded fonts.

Technically you can skip the @font-face and SRC URL portion of the code if you know the font family name, you can just use that.

6 hours ago, Ziggy said:

Technically you can skip the @font-face and SRC URL portion of the code if you know the font family name, you can just use that.

So I tried dropping that part and it seems to inconsistently work. Sometimes it will change the font correctly and other times it will change the font to some kind of random serif font (I've attached a screenshot of what it looks like). Also, if I do get it to correctly change the font, but then I try manipulating the size of the font via the slider in the global font settings, then it seems to reset to that random serif font.

Is this the correct code?

.sqsrte-small {
  font-family:'beloved-script';
}

1 minute ago, Juliaa said:

Is this the correct code?

Yes, this is perfect, works when I test it.

30 minutes ago, Ziggy said:

Yes, this is perfect, works when I test it.

Hmmm. Any chance that I'm running into issues because my site is private while I work on building it?

1 minute ago, Juliaa said:

Hmmm. Any chance that I'm running into issues because my site is private while I work on building it?

No, but sometimes you may need to give your browser a refresh if the CSS isn't rendering.

On 9/13/2023 at 8:49 PM, WCS said:

@mappdesigns Just a heads up that "p" targets all paragraph fonts. 

• p.sqsrte-large (p1)
• p (all paragraph fonts)
• p:not(.sqsrte-large):not(.sqsrte-small) (p2)
• p.sqsrte-small (p3)

Hello, 

What about the different h ? h1, h2, h3 ? 
I have a problem on my website that the fonts are not rendering except for p and I think this is the root of the problem.

Thanks !

36 minutes ago, Priscillia said:

What about the different h ? h1, h2, h3 ? 

For headings you need:

• h1
• h2
• h3
• h4

for paragraphs:

• .sqsrte-large
• p
• .sqsrte-small

https://squarefortytwo.com/squarespace-guides/custom-fonts-on-squarespace-71

2 minutes ago, Ziggy said:

For headings you need:

• h1
• h2
• h3
• h4

for paragraphs:

• .sqsrte-large
• p
• .sqsrte-small

https://squarefortytwo.com/squarespace-guides/custom-fonts-on-squarespace-71

hello, 

That is what i did then, but it is not rendering my font. But the font for the paragraphs is rendering.

This is the code :

h1 {font-family: 'Monoska';}
h2 {font-family: 'AeionMono-semibold';}
h3 {font-family: 'Monoska';}
h4 {font-family: 'Monoska';}
p {font-family: 'AeionMono-Regular';}

On 9/28/2023 at 9:48 PM, Priscillia said:

hello, 

That is what i did then, but it is not rendering my font. But the font for the paragraphs is rendering.

This is the code :

h1 {font-family: 'Monoska';}
h2 {font-family: 'AeionMono-semibold';}
h3 {font-family: 'Monoska';}
h4 {font-family: 'Monoska';}
p {font-family: 'AeionMono-Regular';}

This is Squarespace Font or Custom font? If SS font, can you share site url? If custom font, have you declared font-face yet?

Also, you can also try adding !important after your code

p {font-family: 'AeionMono-Regular' !important;}