Shopify themes, liquid, logos, and UX
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
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
Yes it is in custom.css file, that is why it is showing on other devices than iPhone.
Hi there! I'm encountering the same problem... did you ever get this resolved?
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; }
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025