Adobe fonts not working in Safari

[lume360]

I have built this website in Squarespace and the fonts appear perfectly fine in Chrome but not in Safari.

Does anybody know what can be wrong? Thank you in advance!

This is my header code:

<link rel="stylesheet" href="https://use.typekit.net/xru2ori.css">

And this is my custom css:

@FONT-face {
font-family: "century-old-style-std", serif;
font-weight: 400;
font-style: normal;
font-display: swap;
}

h1, h2, h3, h4{
font-family: "Century Old Style Std", serif;
font-weight: 400;
font-style: normal;
}

p{
font-family: "Century Old Style Std", serif;
font-weight: 400;
font-style: normal;}

.sqsrte-large{
font-family: "Century Old Style Std", serif;
font-weight: 400;
font-style: normal;
}

a#site-title {
font-family: 'Century Old Style Std';
font-size: 1.3em;
font-weight: 400;
font-style: normal;
}

[Tarun Saini]

Hi 

@lume360

,

Thanks for reaching out! We're sorry to hear about your difficulties. What is the version of Safari you're using? Please ensure you are using the updated version of Safari.

Would you mind checking the link below & try the steps for safari: https://adobe.ly/3Ymwhp0...

Let us know if that helps.

Regards,

Tarun

[lume360]

i Tarun. 

I'm using Version 18.3.1 which I believe is the latest. I have the same issue on phone and desktop safari.

I have already followed the steps you mention (adding font weight or style), and nothing changes.

[Tarun Saini]

Thanks for your response 

@lume360

,

I've escalated your case to our product team. Once I hear anything from them, I'll keep you posted.

Regards,

Tarun

[Tarun Saini]

Hi @lume360,

As per our product team, you've used  font-family: "Century Old Style Std", serif; you need to use font-family: "century-old-style-std", serif;

The fonts served from Adobe have the hyphens in the name, not spaces.

Let us know if that helps.

Regards,

Tarun

[lume360]

Unfortunately adding hyphens in the name results in the font not displaying neither in Safari or Chrome 😞

[Tarun Saini]

Hi @lume360,

Can you provide a link with the hyphens added for us to look further? The website is currently using spaces.

Regards,

Tarun

[lume360]

I solved it!

Apparently adding the font manually in the css was causing problems.
After I removed those from the css, adding the names with hyphens did work.

Thanks!

[Tarun Saini]

Thank you for sharing the update on this. We're glad that it worked.