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
Shopify Partner
9 0 2

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:

Captura de pantalla 2024-06-11 210634.png

 

but in my phone doesn't:

Imagen de WhatsApp 2024-06-11 a las 21.03.20_97c98075.jpg

 

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

Replies 4 (4)

horiolah
Visitor
2 0 0

 hey frank

this i because you made a mistake in the store design there is an aspect where you can do that on your online store dashboard.

frankcastle1042
Shopify Partner
9 0 2

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

 Captura de pantalla 2024-06-11 222350.png 

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>

 

horiolah
Visitor
2 0 0

 something like that but it more complex

can you contact me on holar3000@gmail.com to know more about that.

AcidPi
Shopify Partner
36 9 10

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