Jump to content

custom font not working in mobile view

Recommended Posts

Custom fonts work on desktop. They also work in browser Inspector, mobile view. BUT...they do not work on actual mobile devices. Here is my code. Help! 🙂

URL: https://www.breakthelink.org/

@font-face{
     font-family: 'Nexa Light';
     src: url ('https://static1.squarespace.com/static/62c4c46ef88c2c6a02afa70f/t/62eaa735ea232972ef2dc4a4/1659545397369/NexaTextDemo-Light.woff');
     font-weight: regular;
}
h1 {
     font-family: 'Nexa Light';
}


@font-face{
     font-family: 'Playfair Display';
     src: url ('https://static1.squarespace.com/static/62c4c46ef88c2c6a02afa70f/t/62e69ebf7096f8757c4b57a8/1659281087510/PlayfairDisplay-VariableFont_wght.ttf');
     font-weight: regular;
}
h2 {
     font-family: 'Playfair Display';
}

 

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Playfair Display is built into Squarespace, so you shouldn't need to upload it manually.

I can't see a particular reason why Nexa Light is not displaying on mobile. I would try adding important first to see if that works, it's sometimes needed:

h1  {
     font-family: 'Nexa Light', serif !important;
}

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
On 11/22/2022 at 4:17 AM, Ziggy said:

Playfair Display is built into Squarespace, so you shouldn't need to upload it manually.

I can't see a particular reason why Nexa Light is not displaying on mobile. I would try adding important first to see if that works, it's sometimes needed:

h1  {
     font-family: 'Nexa Light', serif !important;
}

I tried adding !important, but to no avail. It's still an issue on mobile. 

As an experiment, I deleted the custom font h1 font and instead used this code to specify another built-in font (Poppins):
h1 {
     font-family: 'Poppins'!important;
       font-weight: 300!important;
}

As with the custom font, it works on desktop but not on mobile. I am beginning to wonder if this is not font-related but a deeper issue with SquareSpace.

It shouldn't be this hard to use two different headline fonts.

Thanks for the note about Playfair Display. 

Link to comment
1 hour ago, RodB said:

As with the custom font, it works on desktop but not on mobile. I am beginning to wonder if this is not font-related but a deeper issue with SquareSpace.

I'm actually not sure, it's a problem I've heard about a couple of times, but has always seemed related to the uploaded font rather than a Squarespace problem

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
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.