Mark_Barnabas Posted January 17, 2023 Share Posted January 17, 2023 (edited) I'm having a font problem... I added the following CSS to enable me to display a different font when an H1 title was formatted with BOTH bold and Italic selected. This works fine in Chrome but not in Safari, where it defaults to a serif font for some reason. Most posts I have read about this are about custom fonts uploaded by users. This font was already offered by Squarespace. My main font is Helvetica, but the code below allows me to use 'Nothing you can do' - a google font that is offered by Squarespace (I haven't had to upload it). Screengrabs below show Safari and Chrome. Any ideas? Thank you so much 🙂 h1 em strong, h1 strong em { color: white; font-family: Nothing You Could Do; font-style: normal; font-weight: normal; text-transform: none; } Edited January 17, 2023 by Mark_Barnabas Correction Link to comment
Ziggy Posted January 17, 2023 Share Posted January 17, 2023 7 hours ago, Mark_Barnabas said: a google font that is offered by Squarespace (I haven't had to upload it). Screengrabs below show Safari and Chrome My guess is that Chrome (google browser) natively supports that google font, but Safari (apple browser) doesn't support Google fonts without uploading (or at least referencing it). You probably don't need to upload it, but reference it from here: https://fonts.google.com/specimen/Nothing+You+Could+Do?query=nothing 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
sayreambrosio Posted January 17, 2023 Share Posted January 17, 2023 7 hours ago, Mark_Barnabas said: I'm having a font problem... I added the following CSS to enable me to display a different font when an H1 title was formatted with BOTH bold and Italic selected. This works fine in Chrome but not in Safari, where it defaults to a serif font for some reason. Most posts I have read about this are about custom fonts uploaded by users. This font was already offered by Squarespace. My main font is Helvetica, but the code below allows me to use 'Nothing you can do' - a google font that is offered by Squarespace (I haven't had to upload it). Screengrabs below show Safari and Chrome. Any ideas? Thank you so much 🙂 h1 em strong, h1 strong em { color: white; font-family: Nothing You Could Do; font-style: normal; font-weight: normal; text-transform: none; } Safari has been horrid all day. It shows up fine. You may have to clear your cache. Sayre Design Site: https://www.stregaconsulting.com Author Coordinates: https://bio.site/sayreambrosio Italian Journey: https://bio.site/ambrosiosjrnyhm Link to comment
Solution Mark_Barnabas Posted January 17, 2023 Author Solution Share Posted January 17, 2023 Thanks folks - I finally made it work by uploading the font as if it was a custom font and using this excellent tutorial I found (https://www.beatrizcaraballo.com/blog/add-custom-font-to-squarespace). Works perfectly now. 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