Jump to content

Custom font on mobile + Safari bold and blurry

Recommended Posts

Hi there, 

I'm using a custom font on my site, which seems to working properly on chrome/desktop and when I view on the Squarespace mobile preview. 

However when I look at the site on an iphone, the font is slightly different. It's the same font, but it looks blurry/slightly bolded. See screenshots attached for reference. Why would this be happening. 

On Safari Desktop it seems fine only in a few instances (ie the footer) it looks bolded and slightly blurry.

Here's the custom font code I've used: 
 

@font-face {
  font-family: 'Manuka';
  src: url(https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/64f6ada57f53c9113ffac138/1693887909569/Manuka-bold.woff2);
   src: url('https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/6513b4863b07fe013352b03c/1695790214319/Manuka-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/6513b4934e3b6a119d6a09c9/1695790227338/Manuka-Bold.ttf')  format('truetype'); /* Legacy iOS */
}


Any ideas how I can get it look nice and crisp?!

https://houseofbubbles.squarespace.com/
password: bubbles

Thank you!

Mobile-Chrome.jpg

Mobile-Safari.jpg

Link to comment

For anyone else needing help with a similar issue - I managed to fix this. 

It seems that I had set a font weight of 600 to my CSS styles: 
 

  h1,
  h2,
  h3 {
    font-family: 'Manuka';
    font-weight: 600;
  }

I think that must have had some issues rendering in Safari and causing the font to look distorted (slightly bold and blurry). 

I just set the font weight as 'normal' and that seems to have done the trick! 
 

 h1,
  h2,
  h3 {
    font-family: 'Manuka';
    font-style: normal;
    font-weight: normal!important;
  }

 

Link to comment
  • 9 months later...

I googled for hours before I found this post. I had the exact same issue and your method fixed it for me too, thank you! 
 

I actually hadn’t specified any font-weight at all so it obviously defaults to an emboldened version for some reason.

Edited by Wozmv88
Link to comment

Great! Glad that worked for you 🙂 Yeah, it seems that if you don't specify a weight or 'normal' it defaults to the bolded version, distorting the fonts. I've run into this same problem a few times on various sites when I'm using custom fonts, and it always seems to do the trick. 

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.