Jump to content

Custom not appearing on mobile

Go to solution Solved by paul2009,

Recommended Posts

ejenks Level 4

ejenks

Posted
Posted (edited)

Hi everyone! I am currently developing my graphic design portfolio, and have run into a bit of issue with custom fonts. Although the custom font that I'm using (Brandon Grotesque) looks good on desktop, for some reason, it's not showing up on mobile (specifically iOS). Instead of displaying Brandon Grotesque, it displays a serif font. Any tips or suggestions about how I could fix this?

Site: https://www.ellajenkinsdesigns.com/

*Edit: It seems like the font is also not showing up on Safari on my computer. Still looks fine on Chrome though 😕

Edited by ejenks
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

ejenks
ejenks

Thank you for the troubleshooting tips @paul2009! I was able to fix the CSS and now it looks great on different platforms 🙂 

Posted Images

  • Solution
paul2009 Level 17

paul2009

Posted
  • Solution
Posted (edited)
35 minutes ago, ejenks said:

Although the custom font that I'm using (Brandon Grotesque) looks good on desktop, for some reason, it's not showing up on mobile.

Hi

When a font is not showing up on mobile, this suggests that the font hasn't been setup in Squarespace properly using CSS. (If the same font is installed on your computer, the font is probably being loaded from there when you test it on the desktop.)

Here are some basic troubleshooting steps to get you started:

  1. Check that the font name you assigned in your @font-face rule (within Custom CSS) is a continuous string (without spaces) like brandon-grotesque or that it has been placed in quotes, like 'Brandon Grotesque'.
  2. Check that the font name in your @font-face rule (described above) uses exactly the same name throughout the CSS. For example, if you used font-family: brandon-grotesque in your font-face at-rule, you should use this exact format when you set the font-family for your h1 or h2 and so on. If you used font-family: 'Brandon Grotesque', you should use this instead.

You may need to save the CSS and reload the page to see if these steps have helped.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
  • 2 weeks later...
  • 2 weeks later...
AIW Level 2

AIW

Posted
Posted (edited)

Hi @paul2009 I'm having a similar issue, but our css appears correct/ labels the font the same way in each occurrence. Any other ideas as to why our font may be appearing strangely on mobile devices? It looks correct on desktop browsers, and when we test with the mobile icon on a desktop. It's only when we're on an actual mobile device where the font changes, and a weird artifact happens where it looks like the font is layered 2-3 times. 

SITE: https://www.alliswellstudios.com/about

CODE :

@font-face {
    font-family: 'GTAmericaBold';
       src: url('https://static1.squarespace.com/static/640254492f4ddd03f446b1a3/t/6423560b2409b21c0435b6a4/1680037387766/GT-America-Standard-Bold.otf');}

h1 {font-family: 'GTAmericaBold';}
h2 {font-family: 'GTAmericaBold';}
h3 {font-family: 'GTAmericaBold';}
h4 {font-family: 'GTAmericaBold';}

 

 

desktop-type.png

mobile-type.PNG

Edited by AIW
url update
Link to comment
  • 2 months later...
ChristieD Level 1

ChristieD

Posted
Posted

Hi, I am having issues with a font not appearing on my phone, however it looks as it should on the live site on my desktop and on both squarespace editing views, desktop and mobile. I have gone in a changed it, then changed it back and saved and it still seems to not be working. Here are some pics. The cursive font that says "Vocal Effects" is as it should be and the plain font saying "Vocal Effects" is how it's looking on my phone. IMG_8214.thumb.PNG.e56c3bd8c370594aae8e2e8199e49710.PNG

This is how it's supposed to look: IMG_8213.thumb.jpg.b346694d9660046c28c3859551886f72.jpg

Any advice would be so appreciated. Thanks, Christie : )

 

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources