mappdesigns Posted September 13, 2023 Share Posted September 13, 2023 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
Ziggy Posted September 13, 2023 Share Posted September 13, 2023 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
WCS Posted September 13, 2023 Share Posted September 13, 2023 @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) artpimpress 1 Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
Solution Ziggy Posted September 13, 2023 Solution Share Posted September 13, 2023 (edited) 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 September 13, 2023 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted September 13, 2023 Share Posted September 13, 2023 (edited) 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: Edited September 13, 2023 by Ziggy WCS 1 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
WCS Posted September 13, 2023 Share Posted September 13, 2023 @Ziggy Whatttt that's exciting! Thanks for letting me know. Ziggy 1 Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link) Link to comment
Ziggy Posted September 13, 2023 Share Posted September 13, 2023 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
mappdesigns Posted September 13, 2023 Author Share Posted September 13, 2023 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? Link to comment
Ziggy Posted September 13, 2023 Share Posted September 13, 2023 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
mappdesigns Posted September 13, 2023 Author Share Posted September 13, 2023 https://sparrow-blackbird-g9fk.squarespace.com/ Password: Espresso Blog Page and Shop Page Link to comment
Juliaa Posted September 13, 2023 Share Posted September 13, 2023 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
Ziggy Posted September 14, 2023 Share Posted September 14, 2023 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted September 14, 2023 Share Posted September 14, 2023 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Juliaa Posted September 14, 2023 Share Posted September 14, 2023 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'; } Link to comment
Ziggy Posted September 14, 2023 Share Posted September 14, 2023 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Juliaa Posted September 14, 2023 Share Posted September 14, 2023 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? Link to comment
Ziggy Posted September 14, 2023 Share Posted September 14, 2023 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. Juliaa 1 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Priscillia Posted September 28, 2023 Share Posted September 28, 2023 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
Ziggy Posted September 28, 2023 Share Posted September 28, 2023 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) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Priscillia Posted September 28, 2023 Share Posted September 28, 2023 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
tuanphan Posted October 1, 2023 Share Posted October 1, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment