kaydotjpg Posted January 9 Share Posted January 9 https://whale-glockenspiel-af3h.squarespace.com/ password: writer Hi! 2 css codes I am using show up great on the backend of editing a client's site, but when my client views their site on their personal browser, or I view it on a different browser (in which I am signed out of SS) my custom codes are not active. One code being my custom font. This custom font is directed mostly at all headers. The custom font is installed and looks great while in edit mode, but not live. Another code is the border radius around the thin, black borders I have on all images; the border is there, just not the rounded corners (weird!) Any tips?? Link to comment
Solution jpeter Posted January 9 Solution Share Posted January 9 @kaydotjpg Do you know what browser the font isn't loading correctly in? Not sure what the font in question is or should look like. For the border issue, I was able to replicate the issue in Safari and it looks like the <div> with the image-block class is using the outline css property when it should probably be using the border CSS property. Here's a video of me using Safari's developer tools changing the property and it resolving the issue. xD1vyumaM6.mp4 kaydotjpg 1 Link to comment
tuanphan Posted January 10 Share Posted January 10 I see you used this code, you haven't declared font-family yet @font-face { font-family: ''; src: url('https://static1.squarespace.com/static/5fbe89636609fd0ee7828cca/t/63b75dba33614854a6d0f205/1672961466397/EDLavonia-Regular.otf') format('otf'),url('https://static1.squarespace.com/static/5fbe89636609fd0ee7828cca/t/63b75db26c53d466fb3cf0e1/1672961458535/EDLavonia-Regular.woff') format('woff') } change your code to @font-face { font-family: 'EDLavonia-Regular'; src: url('https://static1.squarespace.com/static/5fbe89636609fd0ee7828cca/t/63b75dba33614854a6d0f205/1672961466397/EDLavonia-Regular.otf') format('otf'),url('https://static1.squarespace.com/static/5fbe89636609fd0ee7828cca/t/63b75db26c53d466fb3cf0e1/1672961458535/EDLavonia-Regular.woff') format('woff') } 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
kaydotjpg Posted January 10 Author Share Posted January 10 Thank you @jpeter that solved the border issue perfectly!! @tuanphan this also worked great! There is one issue, the weight on the backend of SquareSpace is perfect, however the weight when I'm viewing on a different browser (like Safari) or on mobile (also Safari), the weight is much too thin. I've attached photos to show. Link to comment
tuanphan Posted January 14 Share Posted January 14 On 1/10/2023 at 11:37 PM, kaydotjpg said: Thank you @jpeter that solved the border issue perfectly!! @tuanphan this also worked great! There is one issue, the weight on the backend of SquareSpace is perfect, however the weight when I'm viewing on a different browser (like Safari) or on mobile (also Safari), the weight is much too thin. I've attached photos to show. It looks fine on Window/Chrome. You try checking on the site where you got the font 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
kaydotjpg Posted January 17 Author Share Posted January 17 (edited) @tuanphan yes, it seems the font only comes in one weight, however, it appears that I was able to increase the weight using Squarespace font editing tools- and it's only translating to Windows and Chrome, but not Safari. Is there a reason for this? Edit: I ended up reaching out to the creator of the font. She said that the thin font we're seeing on Safari is the actual font weight, meaning I was able to increase the weight via Squarespace, just by selecting a heavier weight in the edit tools. So- how do I translate that same font edit of the weight that you see on every other browser to Safari? Edited January 18 by kaydotjpg 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