Jump to content

Adobe Fonts not pulling through on mobile?!

Recommended Posts

Site URL: https://www.studiovaishali.com/shop/p/concept-moodboard

Everything on my site works perfectly on desktop, tablet + mobile EXCEPT for my new product pages. On desktop, they're fine. On desktop inspection to mobile, they're fine. On SquareSpace edit for desktop + mobile, they're fine. However, when actually viewing on mobile + tablet, default fonts pull through and I don't know why?! It's all of the details under the H1 including the CTA.

 

Here's an attachment for reference + the CSS I'm using to target this section:

.collection-type-products .ProductItem-details .ProductItem-details-excerpt { 
  font-family: 'Sofia Pro' !important; 
  font-size: 1em !important; 
  line-height: 1.4em !important;
  letter-spacing: 1px
  }

 

 

1D7A6091-FF8E-4629-A9F5-791DB3629A8C_1_105_c.jpeg

Link to comment
  • 2 weeks later...
  • Replies 2
  • Views 1k
  • Created
  • Last Reply
  • 4 weeks later...

I had the same problem, I was using @import to call the fonts in the Custom CSS area, and it worked on my main computer but not on mobile or tablet. I fixed it by adding the <link> code from adobe to the <head> area on SS ( Squarespace Dashboard > Settings > Advanced > Code Injection > Header  )

I would only recommend doing this if you know what you're doing with HTML, but if you're willing you can copy and paste the <link> tag from the Embed Project area on fonts.adobe into the <head> on SS and all your fonts should work. And if you attempt it and something goes wrong you can always undo ( [ 'command + z' on mac ] [ 'control + z' on pc ] ) and revert your changes.

Good Luck!

Link to comment

Archived

This topic is now archived and is closed to further replies.


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