Custom font doesn't show up on mobile

Solved
Highlighted
New Member
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

Highlighted
Shopify Partner
9670 1212 3392

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
New Member
3 0 1

Hi Ketan,

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

0 Likes
Highlighted
Shopify Partner
9670 1212 3392

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
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!

0 Likes