Why does my custom font not display on mobile devices?

[valvatanabe]

Hi guys!

I am using a custom font that I have uploaded into Shopify (Potra font). I have added necessary pieces of code to theme.scss.liquid file, created fonts.css file, as well as referenced fonts.css in the theme.liquid HTML file. For whatever reason, the font shows up on desktop, but not on mobile. I have looked through similar questions, but none of the solutions seem to work. Anyone know the answer for this?

My store is https://thesuperiorsbrand.com/

Password: saetwo

Kind regards,

Val

[KetanKumar · Accepted solution]

Hello, @valvatanabe 

Welcome to the Shopify community!
and Thanks for your question.

i have check this issue doesn't work also desktop 

custom font file are missing

please review below step

Yes, you can do easy to upload your custom font

1. Go to Online Store->Theme->Edit code
2.Asset->/theme.scss.liquid->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
3. Asset->/theme.scss.liquid->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

[valvatanabe]

Hi Ketan,

Thanks! I think it worked. How can i be sure that all devices will display the font though?

[KetanKumar]

@valvatanabe 

Thanks for update and support

yes just add all font type TTF, OTF, WOFF, WOff2, SVG 

That's it 

[klena817]

Hi there, how would this coding change when dealing with different font styles? For example, regular, bold, italic, etc. I was having an issues making sure desktop fonts were showing up on mobile and Im hoping this will solve the issue. Thanks!

[studio429]

I'm using the Dawn theme and it uses base.css - no scss files there. Does this effect how it displays? It works great on the computer but looks totally different on tablets and phones. 

It also says that otf and ttf are invalid file types when trying to upload to assets. Does this vary between themes or just newer updates to shopify?

Thanks

[KetanKumar]

@studio429 

can you please send store url so i will check and let you know 

[Malyj]

Hi there, can you please help me to solve the same problem? I use this css code:

@font-face {
font-family: "Recoleta-Regular";
src:
url('{{ 'Recoleta-Regular.otf' | asset_url }}') format('otf'),
url('{{ 'Recoleta-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Recoleta-Regular.woff2' | asset_url }}') format('woff'),
url('{{ 'Recoleta-Regular.svg' | asset_url }}') format('svg');
font-weight: 400;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
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: 'Recoleta-Regular', serif !important; }

The font shows up only in chrome (desktop) but not on mobile.

Preview link: https://i7kcrqophxmkfr0m-53988786365.shopifypreview.com

Update: "The font shows up only in chrome (desktop) but not on mobile." no longer the case. The font doesn’t show up properly at all.

P.s. I use the Broadcast theme.

[Shamlan98]

No joke. I love you so much.

been trying to fix it for 3 hrs and your code works like a charm

[studio429]

Sorry for the delay, we had some other issues and had to back up a couple steps. I'll list the website below. The font I mentioned is used for H1 tags and doesn't look the same between devices. 

www.harvestgardenfarms.com

[Bailsohey]

Could you help me with the same thing? vudarri.myshopify.com

[Malyj]

Hi, 

this is the code, that works for me. Hope it will work for you too 🙂 

@font-face {
font-family: 'Recoleta-Regular';
src: url('https://cdn.shopify.com/s/files/1/0539/8878/6365/files/Recoleta-Regular.otf?v=1660828517') format('embedded-opentype'),
url('https://cdn.shopify.com/s/files/1/0539/8878/6365/files/Recoleta-Regular.woff?v=1660828517') format('woff'),
url('https://cdn.shopify.com/s/files/1/0539/8878/6365/files/Recoleta-Regular.woff2?v=1660828517') format('woff2'),
url('https://cdn.shopify.com/s/files/1/0539/8878/6365/files/Recoleta-Regular.ttf?v=1660828517') format('truetype');

font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

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: 'Recoleta-Regular', serif !important; }

[KetanKumar]

@Bailsohey 

great Thanks for update

[Shamlan98]

My hero

[bacc]

I'm having the same issue with the font not showing up on mobile.

this is my code:

// newly installed font code start

@font-face {
font-family: "BEANS AWAY Typewriter";
src: url("BEANS AWAY Typewriter.woff2") format("woff2"),
url("BEANS AWAY Typewriter.woff2") format("woff2");
}

h1, h2, h3, p, ul { font-family: "BEANS AWAY Typewriter"!important; }

// newly installed font code end

works great on desktop, does not work on mobile. 

I'm using the Taste theme. 

[thegoodcomfy]

Hi, I have the Craft theme and for some reason this does not work for mobile, the font is still not visible. 

This is my code:

/* Custom Fonts */
@font-face {
font-family: "Shrikhand Regular";
src: local('Shrikhand-Regular.woff'), url(https://cdn.shopify.com/s/files/1/0451/1878/3644/files/Shrikhand-Regular.woff?v=1680628826), format("woff");
src: local('Shrikhand-Regular.svg'), url(https://cdn.shopify.com/s/files/1/0451/1878/3644/files/Shrikhand-Regular.svg?v=1680643639), format("svg");
src: local('Shrikhand-Regular.ttf'), url(https://cdn.shopify.com/s/files/1/0451/1878/3644/files/Shrikhand-Regular.ttf?v=1680644498), format("TrueType");
src: local('Shrikhand-Regular.otf'), url(https://cdn.shopify.com/s/files/1/0451/1878/3644/files/Shrikhand-Regular.otf?v=1680644663), format("embedded-opentype");
src: local('Shrikhand-Regular.woff2'), url(https://cdn.shopify.com/s/files/1/0451/1878/3644/files/Shrikhand-Regular.woff2?v=1680644897), format("woff2");

font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}
h1, h1 a, .headline, .subtitle { font-family: 'Shrikhand Regular' !important; }

Any suggestions or the solution to it?

[Madan-Jewellers]

Hello Ketan,

I know I am replying to an old post but I would be very grateful if you can help me out.

I face the same issue. My custom font does not work on mobile phones. Store: https://madanjewellersindia.com/

I'm using font-family: "Big John PRO", sans-serif; in the custom CSS section.

I tried editing codes in base.css but that does not work.

Kind regards

[KetanKumar]

@Madan-Jewellers oh sorry for that issue can you please show me code how to add.

[Madan-Jewellers]

Sure!

Adding this in base.css

@font-face {
font-family: 'Big John PRO';
src: url('./BigJohnPRO-Regular.eot');
src: url('./BigJohnPRO-Regular.eot?#iefix') format('embedded-opentype'),
url('./BigJohnPRO-Regular.woff2') format('woff2'),
url('./BigJohnPRO-Regular.woff') format('woff'),
url('./BigJohnPRO-Regular.ttf') format('truetype'),
url('./BigJohnPRO-Regular.svg#BigJohnPRO-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}

and adding font type in the assets directory (TTF, EOT, WOFF, WOFF2, SVG)

[KetanKumar]

@Madan-Jewellers thanks for details but you have missing code

try to this 

@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

[Madan-Jewellers]

Thank you for sharing. But it still does not work in mobile view (Android).

I added your code in the base.css along with all the font type files in the assets directory (TTF, EOT, WOFF, WOFF2, SVG).

Do I also have to edit schema.json or theme.liquid for this to work?

[KetanKumar]

@Madan-Jewellers i will take this issue on my can you please share details on DM

[sejsanghvi]

Hi Ketan,

I am facing the same issue. I tried everything. Can you please help me?

This is my code:

@font-face {
font-family: "Buffalo";
src: url({{ "Buffalo.woff2" | asset_url }}) format("woff2"),
url("Buffalo.woff") format("woff");
}

h1,h2 { font-family: "Buffalo"!important; }