Jump to content

Font CCS not working

Go to solution Solved by Ziggy,

Recommended Posts

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}

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@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)

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment
  • Solution

I've cleaned up and corrected your code here:

@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'; 
  font-size:17px !important;
}
h4 {
  font-family:'Mr Eaves XL'; 
  font-size:15px !important;
}
.sqsrte-large {
  font-family:'Mr Eaves XL'; 
  font-size: 15px !important;
}
p {
  font-family:'Mr Eaves XL'; 
  font-size: 12px !important;
}
.sqsrte-small {
  font-family:'Mr Eaves XL'; 
  font-size: 10px !important;
}

 

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

image.png.de790e1dd3d968510efb34e9b674cca7.png

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Can you share your website URL and that page?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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';
}
ScreenShot2023-09-14at9_38_07AM.thumb.png.ddf4a8ab414eab68046c34ed02234686.png

Link to comment
1 minute ago, Juliaa said:

Is this the correct code?

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...
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 !

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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';}

Link to comment
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;}

 

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.