What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Mobile font is different to desktop

Why is my custom font not displaying on mobile?

Craigatkinson98
Visitor
2 0 0

Hi, I added a custom font to my shopify code, im using the dawn theme. It works perfectly fine on desktop, however the font just doesnt work on mobile and i get a generic font. could someone please help. Ive read many discussion boards on this and I cant find a fix that works for me.

Replies 2 (2)

GabrielS
Shopify Partner
486 107 115

Hi there,

 

Other discussions can be very relevant, but unfortunately it can be pretty hard to find an exact code that would work on your end, especially since most of the themes are having a different structure.

 

It's possible that you haven't loaded the font correctly, and it works on your desktop because you have it locally installed, while on mobile its not.

 

It would be helpful if you can share your website link, and indicate which is the font that is not loading as expected.

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
Craigatkinson98
Visitor
2 0 0

www.explorerlife.co.uk is the website. the whole font body is the same font. 

 

In layout > theme.liquid i have

{% style %}
@font-face {
font-family: "Cornerstone";
src: url({{ "Cornerstone.woff2" | asset_url }}) format("woff2");
}

 

in assets > base.css i have

h1, h2, h3, h4, body, header, h5, h6, input, table, output{
font-family: "Cornerstone" !important;
}

 

and this works perfectly for desktop. 

 

However it just doesnt work on mobile