Why is my custom font not displaying correctly on mobile?

Store Design
,
1

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;
}

2

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;
}
3

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

4

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.

Actual mobile device
Actual mobile device945×2048 99 KB

mobile view inspect
mobile view inspect1682×1032 176 KB