Solved

Custom Font not showing in Safari / Mobile

AndyMaccoll
Visitor
2 0 1

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

Accepted Solution (1)

KetanKumar
Shopify Partner
36854 3637 11976

This is an 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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 28 (28)

KetanKumar
Shopify Partner
36854 3637 11976

This is an 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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AndyMaccoll
Visitor
2 0 1

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
Shopify Partner
36854 3637 11976

@AndyMaccoll 

its my pleasure to help and work with you in future

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
morganberbert
Tourist
3 0 2

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
Shopify Partner
36854 3637 11976

@morganberbert 

please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
gavparker
Visitor
2 0 0

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
Shopify Partner
5 0 0

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
Visitor
2 0 0

I'm having the same issue.

illumine
Shopify Partner
2 0 0

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!!  

NRoubal
Shopify Partner
4 0 11

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
Shopify Partner
22 1 1

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
Visitor
2 0 0

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
New Member
4 0 0
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
Visitor
2 0 0

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

HannahMacDonald
Visitor
1 0 0

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

NRoubal
Shopify Partner
4 0 11

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
Shopify Partner
16 0 11

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
Shopify Partner
12 0 1

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

LostIdolsCo
Visitor
1 0 1

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

KetanKumar
Shopify Partner
36854 3637 11976

@LostIdolsCo 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MFSudio
Visitor
1 0 1

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

KetanKumar
Shopify Partner
36854 3637 11976

@MFSudio 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
kumailnanji
Shopify Partner
1 0 1

Worked like a charm! THANK YOU

Studio_Chloe
Shopify Partner
1 0 1

worked a treat!! legend 🙌🏼

KetanKumar
Shopify Partner
36854 3637 11976

@Studio_Chloe its our pleasure to help us.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

kevinowen99
New Member
4 0 0

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
New Member
4 0 0

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
New Member
4 0 0

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.