Custom Font Not Working on Mobile & Macbook Air

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

@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! 

Hi Lesum, 

No I checked and all is good. I decided to create images of my font for the headers instead of using the text editor. Think that has solved the issue for big and small screens.

www.katarinapolonska.com

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

 

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