Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

custom font appears incorrectly on mobile


janijacqui

Question

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. 

 

how font appears on mobiles.jpg

how font should appear.jpg

Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

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.

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
  • 0

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.  

screenshot of font.png

Link to comment
  • 0
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.  

screenshot of font.png

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.

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
  • 0
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.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...