RodB

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. 

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';
}