Custom Font not showing in Safari / Mobile

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

2

@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
  2. 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

3

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

4

@AndyMaccoll

its my pleasure to help and work with you in future

5

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!

6

@morganberbert

please share store url

7

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

8

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?

9

I’m having the same issue.

10

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

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

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.

13

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.

14

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

15

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

16

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

17

@LostIdolsCo

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

18

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?

19

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.

20

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.