I added a font in my shopify theme and in my pc i can see it but on my phone doesn't. how can it be?

[frankcastle1042]

I added a font (CreativeVintage) in my shopify theme and in my pc i can see it but on my phone doesn't.
how can it be?
the font i added i did in all of the ways that i read over here in some posts. i added it like this in base.css:

@font-face {
  font-family: "CreativeVintage"
  src: url ({{"CreativeVintage" | file_url }}) format("truetype")
}
@font-face {
  font-family: "CreativeVintage"
  src: url ({{"CreativeVintage" | file_url }}) format("woff2")
}
@font-face {
  font-family: "CreativeVintage";
  src: url("{{ 'CreativeVintage.ttf' | asset_url }}") format("truetype"),
       url("{{ 'CreativeVintage.woff2' | asset_url }}") format("woff2");
}

 and also i added the files in my shopify content -> files.

in my pc i see the custom font properly:

but in my phone doesn't:

thanks for reading. i'll really appreciate the help.

[frankcastle1042]

hi, thanks for the anwser. 
do you mean here?

  

the problem is that this is a font that was provied by the client, i think i was bought. and in the place that i show you in the picture i think is for google fonts like import 

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
</style>

[AcidPi]

Hi,

You cant add liquid code to the .css file - also there is a bug with uploading fonts to assets that corrupts the font files except SVG type...
upload your fonts to content > files and included fonts via file_url and add via HTML to theme.liquid, before the closing </head> tag.

Based on your current code,  font names and available font types.

<style>
  @font-face {
    font-family: "CreativeVintage";
    src: url("{{ 'CreativeVintage.woff2' | file_url }}") format("woff2"),
         url("{{ 'CreativeVintage.ttf' | file_url }}") format("truetype");
  }
</style>

Full font spec - modify to match your font names and available formats uploaded.

<style>
  @font-face {
    font-family: "CreativeVintage";
    src: url("{{ 'CREATIVE_Vintage.eot' | file_url }}");
    src: local("CREATIVE Vintage"),
		 url("{{ 'CREATIVE_Vintage.svg' | asset_url }}?#CREATIVEVintageRegular") format('svg'),
         url("{{ 'CREATIVE_Vintage.eot' | file_url }}?#iefix") format("embedded-opentype"),
         url("{{ 'CREATIVE_Vintage.woff2' | file_url }}") format("woff2"),
         url("{{ 'CREATIVE_Vintage.woff' | file_url }}") format("woff"),
         url("{{ 'CREATIVE_Vintage.ttf' | file_url }}") format("truetype");
  }
</style>

Regards