janijacqui Posted September 6, 2021 Share Posted September 6, 2021 Site URL: http://intojoinery.com.au Hi, I've used a custom font on our squarespace site. It looks to be working correctly on a few browsers, but when I load it on my mobile, the font is different to that on the browser. It also differs to the example given in the 'mobile view'. I've changed the font file from .tff to a .woff in case that was the problem, but that didn't work. Link to comment
Solution tuanphan Posted September 8, 2021 Solution Share Posted September 8, 2021 Hi, Your font code is invalid. First, Remove all & use this new code @font-face { font-family: 'balgin'; src: url(https://static1.squarespace.com/static/60ea828ae4c85e33c4b2d76d/t/60f50f122117d935efba777a/1626672914651/balgin.ttf); } h1, h2, h3, h4, h5, h6, p, .header-title-text { font-family: 'balgin' !important; } .header-nav *,nav.header-menu-nav-list * { font-family: 'balgin' } Next, please click & check the font file url. It doesn't exist. https://static1.squarespace.com/static/60ea828ae4c85e33c4b2d76d/t/60f50f122117d935efba777a/1626672914651/balgin.ttf 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
janijacqui Posted September 13, 2021 Author Share Posted September 13, 2021 Thanks for your help Tuan. I've used your new code but same problem. Font is correct on laptop and in mobile preview but not actually on mobile browsers. The font file seems to exist on my pc - i've attached a screen shot so you can see what happens when I click on it. Link to comment
tuanphan Posted September 15, 2021 Share Posted September 15, 2021 On 9/13/2021 at 7:25 AM, janijacqui said: Thanks for your help Tuan. I've used your new code but same problem. Font is correct on laptop and in mobile preview but not actually on mobile browsers. The font file seems to exist on my pc - i've attached a screen shot so you can see what happens when I click on it. The font needs to exist on your website. Because if someone else's computer doesn't have that font installed, and they can't access the font url, the browser won't be able to load the font and display it. I see it works on mobile now. Which elements doesn't work from your end? 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
janijacqui Posted September 16, 2021 Author Share Posted September 16, 2021 The website works on mobile and a version of the font also works but not exactly the same font that appears on desktops or in mobile preview. The font isn't consistent across desktop & mobile for some reason. Link to comment
tuanphan Posted September 19, 2021 Share Posted September 19, 2021 On 9/17/2021 at 4:06 AM, janijacqui said: The website works on mobile and a version of the font also works but not exactly the same font that appears on desktops or in mobile preview. The font isn't consistent across desktop & mobile for some reason. Can you take screenshot on your end, both desktp - mobile? 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