Why is my custom font not displaying correctly on mobile?

[awoibo1]

Custom font working on desktop but not mobile device. 

How do I fix it?

Below is my coding

@font-face {
font-family: "TAYKulaRegular";
src: url("TAYKulaRegular.woff2") format("woff2"),
url("TAYKulaRegular.woff") format("woff");
}

h1, h2,h3,h4,h5,h6,body,p,a,input,button { font-family: "TAYKulaRegular"!important; }

@font-face {
font-family: 'TAYKulaRegular';
src: url('{{ 'TAYKulaRegular.eot?' | asset_url }}');
src: url('{{ 'TAYKulaRegular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'TAYKulaRegular.woff' | asset_url }}') format('woff'),
url('{{ 'TAYKulaRegular.ttf' | asset_url }}') format('truetype'),
url('{{ 'MTAYKulaRegular.svg#TAYKulaRegular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

[NomtechSolution · Accepted solution]

To ensure that your custom font works correctly on both desktop and mobile devices, you can try the following steps:

1. Check the file paths: Make sure that the font files (woff2, woff, eot, ttf, and svg) are uploaded correctly to your Shopify theme assets. Verify that the file names and extensions match exactly in your CSS code.

2. Use relative URLs: Instead of using the asset_url filter, which generates an absolute URL, try using relative URLs for your font files. For example:

@font-face {
  font-family: 'TAYKulaRegular';
  src: url('TAYKulaRegular.eot');
  src: url('TAYKulaRegular.eot?#iefix') format('embedded-opentype'),
       url('TAYKulaRegular.woff') format('woff'),
       url('TAYKulaRegular.ttf') format('truetype'),
       url('TAYKulaRegular.svg#TAYKulaRegular') format('svg');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
}

[awoibo1]

I've added all the different file type and used the coding you suggested but now the font is not on the desktop or mobile browser

[brandnkay]

Hello there, im having a similar issue and was wondering if you could help me? 

i have uploaded a custom font to shopify, it looks fine on desktop but on mobile it seems a little off.

i have uploaded ttf woff and woff2 

this is how i have implemented the code into my theme.liquid 

@font-face {
font-family: 'FTRegolaNeue-Semibold';
src: url(https://cdn.shopify.com/s/files/1/0706/2634/5282/files/FTRegolaNeue-Semibold.woff2?v=1730380275) format('woff2');
src: url(https://cdn.shopify.com/s/files/1/0706/2634/5282/files/FTRegolaNeue-Semibold.woff?v=1730380275) format('woff');
src: url(https://cdn.shopify.com/s/files/1/0706/2634/5282/files/FTRegolaNeue-Semibold.ttf?v=1731347456) format('truetype');
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

when using my browser to inspect mobile view it looks fine but on my actual mobile device it doesn't.