Custom Font not showing on Safari

The font was working fine until I refreshed Safari and it is no longer rendering - it works on Chrome 😞

Hoping someone can help.

I injected this into the header: 

<link href="//fastly-cloud.typenetwork.com/projects/7443/fontface.css?64d651c8" rel="stylesheet" type="text/css">

And then in my custom template, under 'Mixins' (custom fonts), I have this code:

.headfont {
    font-family: "IvyPresto Disp Thi";
    font-display: swap;
    font-style: normal;
    font-weight: normal;
  }

  .italicfont {
      font-family: "IvyPresto Disp Thi";
    font-display: swap;
    font-style: italic;
    font-weight: normal;
  }

But it is no longer working in Safari, which is super strange because it was working before.

Actually, the font fluctuates when I refresh on Safari.

Super weird. Hope someone can help.

What is site url? We can check problem easier

@tuanphan my site having the exact same problem as well, please help fix it as well . Big thanks!

Website www.ooftattoo.co

password: 12341234

On 8/15/2023 at 10:42 PM, patrickchan1212 said:

@tuanphan my site having the exact same problem as well, please help fix it as well . Big thanks!

Website www.ooftattoo.co

password: 12341234

Use this code instead

@font-face {
    font-family: 'VisbyCF-Medium';
    src: url('https://static1.squarespace.com/static/64cb53d5dbfd651d32cdaa12/t/64ddc1ffa9143d3854a624da/1692254719504/VisbyCF-Medium.otf');
}
@font-face {
        font-family: 'VisbyCF-ExtraBold';
    src: url('https://static1.squarespace.com/static/64cb53d5dbfd651d32cdaa12/t/64ddc1a4e2566f6d52059107/1692254628291/VisbyCF-ExtraBold.otf');
}
.header-nav-item a, .header-menu-nav-item a, h1, h2, h3, h4, .collection-type-products .grid-title , .grid-prices, .product-price {
    font-family: 'VisbyCF-ExtraBold' !important
}
/* p1 */
p.sqsrte-large {
    font-family: 'VisbyCF-Medium' !important
}