Custom font not showing on mobile in shopify app even though it is does on desktop mobile view

Store Design
,
1

Hi there,

I was hoping someone could help me.

I have upload a custom font which works great when editing my site on my laptop, however when I go on to the shopify app and look at the website on that, it doesn’t show up.

Does anyone know why this has happened?

This is the code I have used:

@font-face {
font-family: “Outfit”;
src: url(“Outfit.woff2”) format(“woff2”),
url(“NAME-OF-FONT-FILE.woff”) format(“woff”);
}

h1,h2,h3 { font-family: “Outfit” !important;}

2

Hey @georgefreud95 ,

Welcome to the Shopify Community!

It looks like you are using the correct code to specify the custom font and apply it to certain elements on your website. However, it’s possible that there might be some issue with the font file itself, or with the way it is being served to the Shopify app.

Here are a few things you can try to troubleshoot the issue:

  1. Make sure that the font file is properly uploaded to your Shopify store and is located in the correct location.

  2. Check the file path in the src attribute of the @font-face rule to ensure that it is correct and points to the location of the font file on your server.

  3. Try using a different font file format (e.g., .ttf or .otf) and see if that fixes the issue.

  4. Check if there are any errors in the browser console that might be related to the custom font. To do this, open the browser dev tools and look for any error messages that might provide clues about the issue.

Let me know how you get on!

3

Hi Moria,

I thought shopify didn’t accept .ttf files?

Can I assume that the issue is only with the app and it will work normally in a browser?

4

I have tried all the above and no luck. Any more ideas?