Custom Font not showing in Safari / Mobile

[AndyMaccoll]

Hi All,

I've searched all the current posts about this topic and couldn't find a fix despite trying everything. I have installed these fonts successfully for Chrome / Brave but they do not load in Safari or on Mobile. My website address is www.tropicale.maison

Please help.

Code below:

@font-face {
font-family: "voyage";
src: url({{ [voyage.woff] | assett_url }}) format("[woff]"),
url({{ [voyage.woff2] | assett_url }}) format("[woff2]"),
url({{ [voyage.eot] | assett_url }}) format("[eot]"),
url({{ [voyage.ttf] | assett_url }}) format("[ttf]");
}

@font-face {
font-family: "kobe", sans-serif;
src: url({{ [kobe.woff] | assett_url }}) format("[woff]"),
url({{ [kobe.woff2] | assett_url }}) format("[woff2]"),
url({{ [kobe.eot] | assett_url }}) format("[eot]"),
url({{ [kobe.ttf] | assett_url }}) format("[ttf]");
}

@font-face {
font-family: "voyagebold";
src: url({{ [voyagebold.woff] | assett_url }}) format("[woff]"),
url({{ [voyagebold.woff2] | assett_url }}) format("[woff2]"),
url({{ [voyagebold.eot] | assett_url }}) format("[eot]"),
url({{ [voyagebold.ttf] | assett_url }}) format("[ttf]");
}

h1:not(.logo-h1), h2, h3, h4, .under-cart .subtotal, blockquote, h5, h6 {
font-family: "voyage", {{ heading_font.fallback_families }};
}

body {
font-family: "kobe", {{ base_font.fallback_families }};
}

.site-control.nav-inline-desktop .site-control__inline-links {
font-family: "kobe", sans-serif, {{ nav_font.fallback_families }};
}

.site-control .site-control__inner .nav-account {
font-family: "kobe", sans-serif, {{ nav_font.fallback_families }};
}

.section-heading .view-all-link {
font-weight: normal;
}

.section-footer .section-footer__title {
font-family: "kobe", sans-serif, {{ base_font.fallback_families }};
}

[KetanKumar · Accepted solution]

@AndyMaccoll 

sorry for that issue but your missing font type its important s all file about font family like TTF,OTF,WOFF,WOFF2,SVG

please flow below step also 

Yes, you can do easy to upload your custom font

1. Go to Online Store->Theme->Edit code
2.Asset->/Addd ->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
3. Asset->/styles.css->paste below code at the bottom of the file.

@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

 can you please just change font name, for example, Montserrat-Regular to your custom font name

[AndyMaccoll]

Hi @KetanKumar 

You are my new favourite person. This worked perfectly. Thank you so much. I'll 100% be in touch if I need anything else.

Check it out - www.tropicale.maison

Cheers,

Andy

[KetanKumar]

@AndyMaccoll 

its my pleasure to help and work with you in future

[morganberbert]

Hi @KetanKumar , I used the above code and it finally allowed me to see one of my fonts on my mobile device; however I have another font that shows on my website as well but it's not showing on my phone. I copied the exact code and entered it under it with just changing the font name. Can you please help me find a way to include both fonts to show on a mobile device? Thank you!

[KetanKumar]

@morganberbert 

please share store url

[gavparker]

Hi, I followed your instructions however shopify doesn't allow the file types TTF, OTF and SVG adding into the assets, how do you work around this? Thanks

[StephBennett]

Hey Ketan,

I'm having trouble adding my custom fonts. Shopify is giving me an error message when I try to add the different file types such as OTF TTF. It's only allowing me to add WOFF or SVG. Have you ever come across this?

[gavparker]

I'm having the same issue.

[illumine]

Hello, I tried this solution however it still doesn't work. Also as someone else mentioned Shopify Dawn does not allow you to upload .TFF or .OTF files. The issue is only on mobile. Using the Safari browser on my iPhone. Thank you!!  

[ricknoubal]

As an update: The Asset URL doesn't seem to work for some of the latest themes (ex: Shopify Taste 3.0.1). This previously did work for other themes; I've posted a method that works using the File upload.

[Cormac_Kerrigan]

Hi there,

I'm suffering the same problem. Custom font works on Chrome and Firefox, but fails to load on Safari and on mobile devices. Any ideas what's causing this? I've tried every different scenario... 

https://www.celticclans.ie/ password: stahly 

/*custom font code*/
@font-face {
font-family: "Hibernica",!important;';
url('{{ 'Hibernica.woff' | asset_url }}') format('woff'),
url('{{ 'Hibernica.woff2' | asset_url }}') format('woff'),
src: url('{{ 'Hibernica.eot?' | asset_url }}');
src: url('{{ 'Hibernica.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Hibernica.ttf' | asset_url }}') format('truetype'),
url('{{ 'Hibernica.svg#Hibernica' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
h1,h3,h4,h5,h6, .featured-products .featured-product a.info .container .left .table .cell .title {
font-family:"Hibernica",Poppins!important;
text-transform: uppercase;
}

[Tom1804]

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

[kevinowen99]

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

[Tom1804]

Thanks Kevin!
Will keep that as a fallback option.
Would prefer not to work with any app to not impact page speed, etc.

[HannahMacDonald]

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

[ricknoubal]

I previously used the method in the Accepted Solution with older themes, which worked as expected, but it no longer works for the latest Shopify Free Theme that I am using.

I spent a while on playing with configurations and hosting of the files, but none of the usual @font-face imports from the past worked on Safari or any mobile browser.

After checking the console on various browsers, I had a hunch it was the browser not liking that files were being served using the liquid asset_url or file_url, without the actual destination URL typed in explicitly.

The below did work for me on every browser and mobile device:

• Save the font files (woff, woff2 is good enough for testing, both are compatible on all modern browsers) using the native Shopify File upload instead of saving them as Theme Assets. The file upload is reached from /Admin/Settings/Files
• After you upload the Files, click the copy link next to each file, which gives you the destination URL; paste these URLS into the CSS below

Below I show an example of the font and one class that it is used to target. This can go into the base.css or any other .css the appropriate .css per your theme.

/* CUSTOM CSS */
@font-face {
font-family: 'Your Custom Font';
font-weight: 300;
font-style: normal;
font-display: swap;
src: url('YourCustomFontFileURL') format('woff2'), url('YourCustomFontFileURL') format('woff');
}

.page-title {
font-family: 'Your Custom Font', sans-serif;
}

[htea]

Thanks for this NRoubal. It fixed my problem as someone who has uploaded custom fonts for 100 stores before!

I also think it's a way faster way to do it too since you can bulk upload in Files, and don't have to re-upload them if you ever switch themes.

[Ozcorp_Web]

You GENIUS!, worked like a charm for me (DAWN 3.0), Thanks a lot man,

[LostIdolsCo]

This works for all the current .liquid themes. Thank you so much for figuring this out!

[KetanKumar]

@LostIdolsCo 

thanks for update if you need any help just let me know 

[MFSudio]

Thank you very much! I was looking for a solution to load fonts directly with URL for days.

[KetanKumar]

@MFSudio 

oh sorry for that any issue can you please share your store url and issue images 

[kumailnanji]

Worked like a charm! THANK YOU

[Studio_Chloe]

worked a treat!! legend 🙌🏼

[KetanKumar]

@Studio_Chloe its our pleasure to help us.

[kevinowen99]

I'm having the exact same problem.

Customs font work fine on Desktop, but don't show up on Mobile. 

I have tried all the solution which are considered 'Accepted Solutions' and they don't work.

I did actually get the 'Semi Bold' to work for 5 minutes on mobile but it now doesn't appear.

Any ideas?

[kevinowen99]

Here's the current code I used,

@font-face {

font-family: ‘Calibre Semibold’;

font-weight: 600;

font-style: normal;

font-display: swap;

src: url('https://cdn.shopify.com/s/files/1/0633/2324/2695/files/Calibre-Semibold.woff2?v=1678538539') format('woff2'), url('https://cdn.shopify.com/s/files/1/0633/2324/2695/files/Calibre-Semibold.woff?v=1678538539') format('woff');

}

This did work for a short period but now on mobile the font doesn't appear. What's weird is the font isn't even the font family set in Shopify which is 'Work Sans', it appears to be a Times New Roman type font.

Thanks for any help. 

[kevinowen99]

Hi,

To anyone still struggling with this problem I solved it by adding 'FontPicker — Easy Google Fonts', from there you can add your custom font files '.woff,.woff2 etc' and it works so so easily.