Jump to content

Custom CSS Font appears duplicate/with a drop shadow on mobile

Recommended Posts

Hi there, 

I was wondering if anyone is able to help me. I uploaded Norman Fat font family to my site a while ago and all is working great. But when I added scrolling text banner, on mobile the text appears doubled, or like it has a weird drop shadow. It doesn't appear like this on desktop, nor in the 'mobile view' on the Squarespace editor, just when I look at it on my iPhone. 

Can anyone advise how to change the font weight for this, when the only options for the text design are 'heading' or 'paragraph', so I don't even know if it's using the H3 or H4 etc . 

Any help would be much appreciated! 

 

IMG_3040.jpeg

Screenshot 2023-07-27 at 21.10.43.png

Screenshot 2023-07-27 at 21.11.01.png

Link to comment
  • Replies 17
  • Views 2.9k
  • Created
  • Last Reply

Top Posters In This Topic

On 8/1/2023 at 2:49 PM, georgiek said:

How weird! Can I ask what mobile phone you use? On mine and my partner's iPhone 13s it doesn't look great, but good to know it's not the case on every phone. 

 

I use Samsung/Android. Maybe problem from custom font. You try checking website where you get the font, to see if the font works there or not.

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
  • 4 months later...

@tuanphan@georgiek

Hey, I confirm I reproduced the same issue with my custom CSS Font  which is Dutch801 Bold Italic on several iOS devices.

I’ve reached out the Squarespace Support but they redirected to the forum as custom code is not their responsibility. Meanwhile, there seem to be an issue with this quite straightforward way of changing font.

Were you able to fix your issue?

IMG_5992.png

Link to comment
On 12/11/2023 at 5:44 PM, AfterSpin said:

@tuanphan@georgiek

Hey, I confirm I reproduced the same issue with my custom CSS Font  which is Dutch801 Bold Italic on several iOS devices.

I’ve reached out the Squarespace Support but they redirected to the forum as custom code is not their responsibility. Meanwhile, there seem to be an issue with this quite straightforward way of changing font.

Were you able to fix your issue?

IMG_5992.png

Can you send font file? I will try testing on my site

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
  • 4 weeks later...

Found a solution in this thread: 

A bit odd, but changing the text style from header to paragraph seems to do the trick. I copied my custom h1 style to the p1 style:

h1 {
  font-family: "Scotch-Display-Compressed-Fat";
  text-transform: none; 
  font-size: 4.5em;
  line-height: 0.95em;
}

becomes:

/*p1*/
p.sqsrte-large {
    font-family: "Scotch-Display-Compressed-Fat";
  text-transform: none; 
  font-size: 4.5em;
  line-height: 0.95em;
  letter-spacing: -0.025em;
}

Essentially, all my h1s are now p1s (not ideal) but it does solve the issue for now without further style disruption

Link to comment
6 hours ago, liranf said:

I am having this exact issue—everything appears fine on desktop and in the SQSP mobile preview, but all my H1s appear doubled on mobile. I'm seeing this issue specifically on an iPhone 13 as well. Website URL is: https://www.lastdollarstudios.com/

Hi, I had a quick look at your site. On your homepage, I don't see any use of h1 text. Can you let me know which page you use h1?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Customisation help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment
3 hours ago, melody495 said:

Hi, I had a quick look at your site. On your homepage, I don't see any use of h1 text. Can you let me know which page you use h1?

@melody495 see my comment above. My fix for the issue was changing all of my h1s to p1s, so I don't have any h1s on my site anymore currently.

Link to comment
2 hours ago, liranf said:

@melody495 see my comment above. My fix for the issue was changing all of my h1s to p1s, so I don't have any h1s on my site anymore currently.

Ah I see, I didn't realise that's what you meant. If you wanted to create a hidden page with h1, I am happy to have a look. Curious to see what's going on! Although I don't have an iPhone, only android.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Customisation help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment
24 minutes ago, melody495 said:

Ah I see, I didn't realise that's what you meant. If you wanted to create a hidden page with h1, I am happy to have a look. Curious to see what's going on! Although I don't have an iPhone, only android.

@melody495 I'd be curious to know if the issue exists across other mobile devices. Just made a hidden page and added some H1 text: https://www.lastdollarstudios.com/h1-test. Let me know if this appears properly on your Android.

Link to comment
2 hours ago, liranf said:

@melody495 I'd be curious to know if the issue exists across other mobile devices. Just made a hidden page and added some H1 text: https://www.lastdollarstudios.com/h1-test. Let me know if this appears properly on your Android.

Thanks. Here is on my android with chrome. Looks fine!

image.thumb.png.0108f8dec28b1a7786fde0efebe95f66.png

I did some googling. Looks like a safari, iOS issue. They offer some suggestions, but I think you would need to test it out to see.

https://theme.co/forum/t/font-weight-different-on-different-devices-and-browsers/9355/3

https://discussions.apple.com/thread/7462259?sortBy=best&page=2

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Customisation help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment
On 1/5/2024 at 8:51 PM, melody495 said:

I did some googling. Looks like a safari, iOS issue. They offer some suggestions, but I think you would need to test it out to see.

https://theme.co/forum/t/font-weight-different-on-different-devices-and-browsers/9355/3

https://discussions.apple.com/thread/7462259?sortBy=best&page=2

 

Hi, did you try this out?

Try adding to your h1 styling:

h1 {
	-webkit-font-smoothing: antialiased;
}

Let me know how it goes.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 Can't figure something out and want to learn? 💁‍♀️ 1-2-1 Squarespace session 
👩‍💻 Need some customisation for a design? 💁‍♀️ Customisation help
 Did I help? 💁‍♀️ I like coffee (Thank you)

Link to comment
  • 2 weeks later...
On 1/8/2024 at 11:29 AM, melody495 said:

Hi, did you try this out?

Try adding to your h1 styling:

h1 {
	-webkit-font-smoothing: antialiased;
}

Let me know how it goes.

Just gave it a shot, and unfortunately it did not work. I'm still seeing the duplicate letters on mobile. Tried the other -webkit-font-smoothing options also. I guess it's just a general iOS issue (the problem appears on the Google Chrome mobile app as well as Safari).

Though a bit confusing, the paragraph styling fix I have works for now.

Thank you for your help and suggestions, @melody495!

Link to comment
  • 2 months later...

Hey there, I had the same issue and found a solution. It appears that iOS wanted some additional CSS properties defined...

font-weight: 400;
font-style: normal;

If you add this to your custom font, it should render properly and not look duplicated. 

Cheers!

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.