Ive been building my site over the last few months but I cannot for the life of me figure out why the custom fonts show differently on mobile!
When I use the mobile preview when editing the themes the font shows perfectly but when I jump onto an actual mobile to test the site the custom fonts are not showing up correctly, they look a bit thin and the spacing is all wrong.
I have searched on many forums to try find a solve for this and seems like a lot of people have this issue. I’m hoping someone can help me fix this?
my website is www.barnabyoutdoor.co.nz
I have added the following to my custom code:
@font-face {
font-family: ‘FuturaPTDemi’;
src: url(‘https://cdn.shopify.com/s/files/1/0550/1956/9367/files/FuturaPTDemi.otf?v=1713872906’);
src: url(‘https://cdn.shopify.com/s/files/1/0550/1956/9367/files/FuturaPTDemi.otf?v=1713872906’) format(‘embedded-opentype’),
url(‘https://cdn.shopify.com/s/files/1/0550/1956/9367/files/FuturaPTDemi.woff?v=1713872905’) format(‘woff’),
url(‘https://cdn.shopify.com/s/files/1/0550/1956/9367/files/FuturaPTDemi.woff2?v=1713872905’) format(‘woff2’),
url(‘https://cdn.shopify.com/s/files/1/0550/1956/9367/files/FuturaPTDemi.ttf?v=1713872906’) format(‘truetype’),
url(‘https://cdn.shopify.com/s/files/1/0550/1956/9367/files/FuturaPTDemi.otf?v=1713872906’) format(‘otf’);
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}