Arabic Font style not working with mobile browser

[Byzaina]

I have upload thesans font to my theme assets and it's working fine with desktop browser 

but it's not working with the mobile browser 

please if you can any one help me in this 

the website url is :
Byzaina.com

[tim]

It's an easy one -- you're editing assets/base.css  and trying to use liquid code like {{ 'TheSans.eot' | asset_url }}, but the problem is -- .css assets do not process liquid code.

When you're looking at the site on your desktop it most likely uses cached copies of the font -- you've probably researched the font before or even installed on your computer...

What you need to do, is to move these font-face rules into liquid file, for example into layouts/theme.liquid, or can add in a "Custom liquid" section added to header of footer groups. I strongly recommend the latter because editing theme code will make your theme updates more complex and prevent autoupdates.

[Byzaina]

I am sorry could you explain to me more , and give me step by step guide, because I am not programmer 

thank you for sharing this details with me

[tim]

Sure, no problem.

1. Open your assets/base.css and remove the code you've added earlier:

/* Font-face for TheSans */
@font-face {
  font-family: 'TheSans';
  src: url({{ 'TheSans.eot' | asset_url }}) format('embedded-opentype'),
       url({{ 'TheSans.woff2' | asset_url }}) format('woff2'),
       url({{ 'TheSans.woff' | asset_url }}) format('woff'),
       url({{ 'TheSans.ttf' | asset_url }}) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

2. Save and go Customize your theme. Add a "Custom liquid" section in "Header" section group. Paste the code form above, but wrap it with <style> ... </style> tags.

If this does not work, it is possible that your font files were corrupted when uploaded to theme Assets. In this case, you'd need to upload your fonts into Content-> Files area of your admin and use this code instead:

<style>
/* Font-face for TheSans */
  @font-face {
    font-family: 'TheSans';
    src: url({{ 'TheSans.eot' | file_url }}) format('embedded-opentype'),
        url({{ 'TheSans.woff2' | file_url }}) format('woff2'),
        url({{ 'TheSans.woff' | file_url }}) format('woff'),
        url({{ 'TheSans.ttf' | file_url }}) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
</style>

See the <style> ... </style> tags in this code snippet? And that asset_url  were replaced with file_url?