Why does my custom font not display on mobile devices?

Solved

Why does my custom font not display on mobile devices?

valvatanabe
Visitor
3 0 1

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

Accepted Solution (1)

KetanKumar
Shopify Partner
36941 3642 12003

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

 

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 21 (21)

KetanKumar
Shopify Partner
36941 3642 12003

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

 

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
valvatanabe
Visitor
3 0 1

Hi Ketan,

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

KetanKumar
Shopify Partner
36941 3642 12003

@valvatanabe 

Thanks for update and support

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

That's it 

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
klena817
Visitor
1 0 0

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
Tourist
4 0 1

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
Shopify Partner
36941 3642 12003

@studio429 

can you please send store url so i will check and let you 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
Malyj
Visitor
2 0 3

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

No joke. I love you so much.

 

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

studio429
Tourist
4 0 1

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

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

Malyj
Visitor
2 0 3

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
Shopify Partner
36941 3642 12003

@Bailsohey 

great Thanks for update

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

My hero

 

bacc
Visitor
2 0 0

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
Tourist
5 0 1

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
Tourist
4 0 3

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
Shopify Partner
36941 3642 12003

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

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
Madan-Jewellers
Tourist
4 0 3

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
Shopify Partner
36941 3642 12003

@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

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
Madan-Jewellers
Tourist
4 0 3

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
Shopify Partner
36941 3642 12003

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

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