Jump to content

Font face does not work on android mobile (chrome).

Go to solution Solved by Ziggy,

Recommended Posts

Quote

@font-face {
   font-family: 'Clarendon LT Std Roman';
   src: url('Clarendon-LT-Std-Roman.eot');
   src:    url('Clarendon-LT-Std-Roman.eot?#iefix') format('embedded-opentype'),
              url('clarendon_lt_std_roman-webfont.woff2') format('woff2'),
              url('clarendon_lt_std_roman-webfont.woff') format('woff'), 
              url('Clarendon-LT-Std-Roman.otf') format('otf');
}

The font seems to be loading on desktop everywhere (not only the desktops where the font has been installed). Safari on iOS loads the font aswell but chrome on android does not. Does anyone know what I might've done wrong? (worked out in Wordpress and fonts have been uploaded in the fonts folder)

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

  • Solution

Interesting that it seems to be working, but I would guess that is because you have the font installed on your computer. 

When using a custom font, in the CSS the src URL needs to be a link to where the font is hosted, at the moment you don't have that which is why it's not working.

At the bottom of the Custom CSS tab in your dashboard, you can upload the font and then add that URL inside the brackets after src: URL('')

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.