dunc Posted February 5, 2021 Share Posted February 5, 2021 Site URL: https://lykopis.com/ Hi there I am hoping someone can help us to get our custom font that shows correctly on desktop to also display on mobile. We have custom font implemented using CSS for 2 sections: 1. Header 1 2. Cover Page Header DESIGN >CSS //ADD BOLTON FONT// @font-face { font-family: 'BOLTON'; src: url( }https://static1.squarespace.com/static/5cb57d98d74562986f6b14cf/t/601d08fa707518709464c14c/1612515578387/Bolton.ttf)format('BOLTON'); } //APPLY BOLTON FONT TO HEADER 1// h1 {font-family: 'BOLTON' !important; } COVER PAGE > ADVANCED > CSS <style> h1#sqs-slash-page-header { font-family: 'BOLTON' !important; } </style> DESKTOP: MOBILE: Link to comment
derricksrandomviews Posted February 5, 2021 Share Posted February 5, 2021 I suggest you use the Squarespce Font Alice, very close to Bolton, for your site, it will show up on mobile in place of what is there now I think, it certainly will if you use it instead of a custom Font. Link to comment
dunc Posted February 5, 2021 Author Share Posted February 5, 2021 Thanks for the suggestion. Unfortunately we are not able to go that route, as the font is specific to our branding across all marketing, merch, etc. Link to comment
derricksrandomviews Posted February 5, 2021 Share Posted February 5, 2021 (edited) Alice doesn'quite match and neither does SS Times New Roman. Hopefully this code wil do it. /* Mobile */ .mobile-site-title a { font-family: Bolton; Edited February 5, 2021 by derricksrandomviews Link to comment
dunc Posted February 5, 2021 Author Share Posted February 5, 2021 11 minutes ago, derricksrandomviews said: Alice doesn'quite match and neither does SS Times New Roman. Hopefully this code wil do it. /* Mobile */ .mobile-site-title a { font-family: Bolton; Thank you. Unforutnately no such luck. I tried applying this to both the custom CSS and cover page CSS. Is this meant to update both Header 1 and the Cover Page title? Link to comment
derricksrandomviews Posted February 5, 2021 Share Posted February 5, 2021 (edited) When it is a s 7.0 cover page, Custom CSS, applied in the custom css window, does not appy to it, but code still woks when applied to the page. I had snow falling on mine for the holidays and like you just tried, I put it on the page itself, but I had a fit getting it to work. This Custom font upgrade will take a bit of help from other coders who are better than me I think. This may help you, With cover pages, my research finds no special instructions just for mobile. https://hyggedesign.co/custom-font-squarespace-cover-page/ Edited February 5, 2021 by derricksrandomviews Link to comment
Solution tuanphan Posted February 7, 2021 Solution Share Posted February 7, 2021 You need to insert all code to Cover Page Header.' Code in Custom CSS won't run on Cover Page <style> @font-face { font-family: BOLTON; src: url(paste font file url here); } h1#sqs-slash-page-header { font-family: BOLTON !important; } </style> 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment