CKW_242 Posted November 17, 2022 Share Posted November 17, 2022 Hi! I want to change the header font on one page of my site only. But I am looking to change it to a custom font or font that is not native to squarespace. How do I do that? Link to comment
Ziggy Posted November 17, 2022 Share Posted November 17, 2022 You'll need to upload the custom font into the Custom CSS, then load it and apply it the the navigation links on a page using the page collection ID. You can follow these steps to upload the font:https://squarefortytwo.com/squarespace-guides/custom-fonts-on-squarespace-71 This guide for finding the IDs:https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71 And if you share your website URL I can help you with the CSS to adjust the navigation links. 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
CKW_242 Posted November 18, 2022 Author Share Posted November 18, 2022 So I've been trying this but it still changes the font for the whole website but I only need it for the individual page. Here is what I have been putting into the CSS and this changes the whole website: @font-face { font-family: 'Formula1'; src: url(https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/63767accfcb9634505258f55/1668709068391/Formula1-Display-Bold_web.otf) } h1 { font-family: 'Formula1', alternative-web-safe-font; } h2 { font-family: 'Formula1', alternative-web-safe-font; } h3 { font-family: 'Formula1', alternative-web-safe-font; } h4 { font-family: 'Formula1', alternative-web-safe-font; } I have the squarespace ID but where do I apply that in the custom CSS section? Putting it on line one gives me a syntax error. And I am unable to share the page because it is currently locked on the front end and cannot be shared to public right now. Can i send it to you hidden somehow? Link to comment
CKW_242 Posted November 18, 2022 Author Share Posted November 18, 2022 I have also tried [data-section-id="6374402e01adbf47b9288afd"] * @font-face { font-family: 'Formula1'; src: url(https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/63767accfcb9634505258f55/1668709068391/Formula1-Display-Bold_web.otf) } #collection-637435e976f4ab38edc23c21 * h1 { font-family: 'Formula1', alternative-web-safe-font; } h2 { font-family: 'Formula1', alternative-web-safe-font; } h3 { font-family: 'Formula1', alternative-web-safe-font; } h4 { font-family: 'Formula1', alternative-web-safe-font; } Link to comment
Ziggy Posted November 18, 2022 Share Posted November 18, 2022 Try this: @font-face { font-family: 'Formula1'; src: url('https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/63767accfcb9634505258f55/1668709068391/Formula1-Display-Bold_web.otf') } #collection-637435e976f4ab38edc23c21 { h1, h2, h3, h4 { font-family: 'Formula1', sans-serif; } } CKW_242 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
CKW_242 Posted November 18, 2022 Author Share Posted November 18, 2022 Yes that works, thank you so much! How would I go about changing the paragraph type for that page only to a different font too? The font name is Titilium and the url is https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/6377acdc56b3050d79ad7236/1668787420203/TitilliumWeb-Regular.ttf Link to comment
Ziggy Posted November 18, 2022 Share Posted November 18, 2022 Very similar to what you already have, just adjust for the new font and targeting paragraphs: @font-face { font-family: 'Titilium'; src: url('https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/6377acdc56b3050d79ad7236/1668787420203/TitilliumWeb-Regular.ttf') } #collection-637435e976f4ab38edc23c21 { p, .sqsrte-small, .sqsrte-large { font-family: 'Titilium', sans-serif; } } Give me a thumbs up if that helped, thanks! CKW_242 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
CKW_242 Posted November 18, 2022 Author Share Posted November 18, 2022 Last thing! How do I not have i affect the font of the footer if possible? It uses the paragraph font so it all changed Link to comment
Ziggy Posted November 18, 2022 Share Posted November 18, 2022 Change to this: @font-face { font-family: 'Titilium'; src: url('https://static1.squarespace.com/static/5fbbb678c232b91085ecdee9/t/6377acdc56b3050d79ad7236/1668787420203/TitilliumWeb-Regular.ttf') } #collection-637435e976f4ab38edc23c21 { #page p, #page .sqsrte-small, #page .sqsrte-large { font-family: 'Titilium', sans-serif; } } CKW_242 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
chloe123brasier Posted April 3, 2023 Share Posted April 3, 2023 How do I apply this to the "Cart" text in the header? Link to comment
Ziggy Posted April 3, 2023 Share Posted April 3, 2023 @chloe123brasier can you share your website URL? 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
DaveAW Posted January 24 Share Posted January 24 I have uploaded a custom font and am able to use it by selecting H1 H2 etc. Does it show in the list of fonts ? Also, I want to allocate the font to the header - to the navigation menu but can't see how to. Thanks Link to comment
tuanphan Posted January 28 Share Posted January 28 On 1/24/2024 at 6:05 PM, DaveAW said: I have uploaded a custom font and am able to use it by selecting H1 H2 etc. Does it show in the list of fonts ? Also, I want to allocate the font to the header - to the navigation menu but can't see how to. Thanks No. Custom Font won't show on List of Font in Site Styles, to assign it to an elements, you need to use CSS code. You can share link to your site + let me know which elements you want to apply custom font, we can give the code 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