Jump to content

custom font appears incorrectly on mobile

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.