Hi @KetanKumar
I hope you are well!
I have the same issue, that my custom fonts are not being shown on the safari browser.
I have tried both, adding the fonts as files as well as assets.
I currently have the following css code included:
@font-face {
font-family: ‘Anton’;
src url(‘https://cdn.shopify.com/s/files/1/0727/2700/3483/files/Anton-Regular.ttf?v=1680958719’) format (“truetype”),
url(‘https://cdn.shopify.com/s/files/1/0727/2700/3483/files/Anton-Regular.woff?v=1680958727’) format (“woff”),
url(‘https://cdn.shopify.com/s/files/1/0727/2700/3483/files/Anton-Regular.woff2?v=1680958728’) format (“woff2”),
url(‘https://cdn.shopify.com/s/files/1/0727/2700/3483/files/Anton-Regular.otf?v=1680966825’) format (“otf”),
url(‘https://cdn.shopify.com/s/files/1/0727/2700/3483/files/Anton-Regular.svg?v=1680967212’) format (“svg”),
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
Can you maybe have a look and let me know if you have an idea on why font is not shown on safari browser?
Thanks so much in advance.
Cheers,
Tom
Hi Tom,
The only way I was able to solve this was addin g Google Fonts app onto my store and from there using the app to add custom fonts. It’s really easy and works on both mobile and destop.
Kevin
Thanks Kevin!
Will keep that as a fallback option.
Would prefer not to work with any app to not impact page speed, etc.
Hi, I’m having the same issues that others on this thread are having. I’ve tried every solution on this site, and so far nothing has worked for me on Safari (desktop and mobile)/iOS (any browser). This is the CSS I am currently using – I only have OTF, WOFF and WOFF2 files for the fonts I have added, not sure if maybe I need to add TTF/EOT file types? Fonts are displaying perfectly in Chrome, for reference,
https://exclusive-resorts-store.myshopify.com/
pw: Exclusive
Theme: Symmetry
@font-face {
font-family: ‘mreavesmodot-light’;
src: url(“{{‘mreavesmodot-light-webfont.woff2’| asset_url }}”) format(“woff2”),
url(“{{‘mreavesmodot-light-webfont.woff2’| asset_url }}”) format(“woff”);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
Thank you very much! I was looking for a solution to load fonts directly with URL for days.
1 Like
@MFSudio
oh sorry for that any issue can you please share your store url and issue images
Worked like a charm! THANK YOU
1 Like
@Studio_Chloe its our pleasure to help us.
@KetanKumar I could use help with the same issue. A native Shopify font (Alegreya Sans (Bold Italic) isn’t showing up in Safari, but only on the custom coded sections (where I applied CSS to display Alegreya Sans instead of another font).
How can I fix this for Safari please?
site: dragonsdenhawaii.myshopify.com
pw: dragon
thanks a lot!
1 Like
@mariafy2
It’s my pleasure to help! If possible, please share the specific section where you’d like to apply the custom font. That would be great, and I can then provide a proper solution for any further issues.
Thank you @KetanKumar here’s a few images:
Alegreya Sans is native to Shopify, I added it as a font to my typography panel. Note that the font display on Safari whenever it was within the theme, but wherever I used CSS to change the font to Alegreya Sans, it does not display on Safari.
this is what I added to CSS to change the font of the tab titles to Alegreya Sans
this is what it looks like in Safari — Alegreya Sans font isn’t displaying
site: dragonsdenhawaii.myshopify.com
pw: dragon
1 Like
@mariafy2 Thanks for the details. You can add your custom font files (like .ttf, .otf, .woff, .woff2, or .svg) to your theme. It’s important to include the custom font properly in your theme to ensure it works. Let me know if you’re able to do this, and I’ll guide you through the next steps.
