MakingWaves Posted December 3, 2020 Share Posted December 3, 2020 Site URL: https://www.fionapickles.com/ Hey everyone. I've added this css to change the title and category fonts for my summary blocks. Each font displays perfectly on all screen sizes when viewed through Squarespace, but now the site is live, when viewed through the browser on mobile (Chrome in my instance) the fonts don't show correctly. It's only Adobe Caslon Pro so assuming this isn't the problem? First photo is how fonts display on mobile (incorrectly) and the second is how they display through Squarespace account (correctly). Any ideas? Thanks in advance. /* Summary Block Title */ .summary-title-link { font-family: 'Adobe Caslon Pro'!important; text-transform: uppercase !important; font-size: 15px; letter-spacing: .07em; } /* Summary Block category */ .summary-metadata-item a { font-family: 'Adobe Caslon Pro'; text-transform: sentence case; font-size: 14px; font-style: italic; line-height: 1.8em; color: #b36847; letter-spacing: .05em; } https://www.fionapickles.com/ Link to comment
tuanphan Posted December 6, 2020 Share Posted December 6, 2020 try lowercase 'adobe-caslon-pro' !important MakingWaves and fhoreilly 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MakingWaves Posted November 25, 2021 Author Share Posted November 25, 2021 Late response but this actually worked perfectly thanks. I changed to all lowercase and added hyphens. Mobile displays correctly now. Big thanks Tuan. 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