Re: Custom font on shopify not loading on Safari Browser

Custom font on shopify not loading on Safari Browser

miromar69
Visitor
2 0 0

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

Replies 4 (4)

EcomGraduates
Shopify Partner
795 68 114

Hello there  

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

    <link href="{{ 'custom.css' | asset_url }}" rel="stylesheet">

 


 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner



miromar69
Visitor
2 0 0

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

MadcapCreative
New Member
5 0 0

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

 

WillyMason
New Member
6 0 0

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