Jump to content

Custom Font Not Working on Mobile & Macbook Air

Recommended Posts

I'm hopeful for any insight. This issue has been ongoing since Squarespace did an update in July. Was told it was a backend issue, but more recently have been told that I need to fix the issue.

 

On my chrome browser (PC) it's fine, on my chrome on mobile it does not ("Welcome" in first picture below). My partner's macbook running Safari, also not working. It should look like the second image.

My code is below. Any ideas, please? 🥲

 

@font-face {
font-family: Janetanice;
src: url('https://static1.squarespace.com/static/6492e9338590f6612aea1c2d/t/6492e9658590f6612aea244e/1679927006397/Janetanice.otf');
}

// Header 4 Font //

h4 {
    font-family: 'Janetanice' !important;
}

// Site Title //
.header-title-text a {
  font-family: Janetanice !important;
}

Screenshot_20230830-091119.png.82b3c2e18fdaedf153d7fa46436e3739.png

PC.jpg.5a371ec43124644afe10725e527ec28f.jpg

Link to comment
  • Replies 4
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

@KPCoach There shouldn't be any issues with the code unless you uploaded the wrong font file or you're trying to target the h4 tag in the code, but you've used the h1, h2, or h3 tag on the website.

If you could share your site URL, we can take a look. Thanks! 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Hello

I've added a custom font to my website, and added the "!important;" next to it, and it is still not showing. Below is the code. 
It is only appearing on Google chrome on the mac where the font is installed on the mac. Safari doesn't load it. Additionally, on other PCs and mobile it does not load. Can someone please support in this? It is for an important event going live soon. (site url : www.riyadhfashionweek.squarespace.com)

@font-face {
font-family: 'SOLAR-VESTA-SERIF' !important;
src:
url('https://static1.squarespace.com/static/64ece908fafe492e179654a2/t/64ecf24b4f8a56530239f13f/1693333035052/SOLAR+VESTA+SERIF.TTF');
}

h1 {
font-family: 'SOLAR VESTA SERIF' !important;
}

 

Link to comment
On 9/4/2023 at 5:08 PM, DigitalSociopath said:

Hello

I've added a custom font to my website, and added the "!important;" next to it, and it is still not showing. Below is the code. 
It is only appearing on Google chrome on the mac where the font is installed on the mac. Safari doesn't load it. Additionally, on other PCs and mobile it does not load. Can someone please support in this? It is for an important event going live soon. (site url : www.riyadhfashionweek.squarespace.com)

@font-face {
font-family: 'SOLAR-VESTA-SERIF' !important;
src:
url('https://static1.squarespace.com/static/64ece908fafe492e179654a2/t/64ecf24b4f8a56530239f13f/1693333035052/SOLAR+VESTA+SERIF.TTF');
}

h1 {
font-family: 'SOLAR VESTA SERIF' !important;
}

 

First, remove !important in first arrow. This will make font-face code invalid

Second, make sure both font name are same

image.png.f086469cb843c5b1c664272d4561c5a6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.