Custom font on shopify not loading on Safari Browser

Store Design
, , ,
1

Hi there

Hope everyone is good.

Problem is my shopify store has custom font “IntegralCF-Regular” embedded and used but the font is not showing up correctly in safari. Here is my code in “custom.css”:

@font-face {
    font-family: 'IntegralCF-Regular' ;
    src: local('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff?v=1645097830'), local('Integral-CF-Regular'),
        url('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff2') format('woff2'),
   font-weight: 400;
    font-style: normal;
  }

@font-face{font-family:'IntegralCF-Regular' ;
           src:url(https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff?v=1645097830) format('woff');
           font-weight:600;
           font-style:italic;}

  .header-wrapper span, .footer-section h4, .footer-section p, .footer-section span, .footer-section button#Subscribe-footer-newsletter-section, .footer-section li {
    font-family: IntegralCF-Regular;
     src: local('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff?v=1645097830'), local('Integral-CF-Regular'),
        url('https://cdn.shopify.com/s/files/1/0561/3898/9704/files/IntegralCF-Regular.woff2') format('woff2');
}

Please any one can guide because non of the solutions worked for me or may I don’t know how to implement them.

Thanks

2

Hello there

did you make sure your custom.css is in the theme.liquid file
3

Yes it is in custom.css file, that is why it is showing on other devices than iPhone.

4

Hi there! I’m encountering the same problem… did you ever get this resolved?

5

Yup same issue for me!!!

annoying hell out of me. I’ve tried solution of uploading to files CDN. But no luck on safari on mobile. Ok on chrome.

this is my code (Flex theme)

/* # Font-Face
================================================== /
/ This is the proper syntax for an @font-face file.
Upload your font files to Assets and then
copy your FontName into code below and remove
comment brackets */
@font-face {
font-family: ‘RoseAvenue’;
src: url(‘https://cdn.shopify.com/s/files/1/0629/3310/6856/files/RoseAvenue.woff?v=1682387823’) format (‘woff’),
url(‘https://cdn.shopify.com/s/files/1/0629/3310/6856/files/RoseAvenue.woff2?v=1682387849’) format (‘woff2’);
}

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: ‘RoseAvenue’ !important; }