Why isn't my @font-face displaying correctly?

Store Design
21

UPVOTED + LIKED + THUMBS UP! Thank you for pointing me to the right direction.

Everything in my code was correct and I couldn’t figure out why my fonts weren’t working. I uploaded my woff elsewhere and used that external URL in my src and it worked, FINALLY!!! Thank you :)!!!

EDIT: Shopify should fix their font uploader! I wasted so much time trying to figure this out! Thank the gods again for your ( @Edgywebsites ) post about the “buggy” code editor/uploader.

22

Glad I could be of help! :slightly_smiling_face:

23

thanks, got the same issue, now solved

24

Thank you so much, this really helped since all other solutions were not working!

25

THANK YOUUUU !!!

26

have tried this method but still struggling to fix it

after deleting woff and ttf files and then reuploading all my files via settings
then updating this code;

@font-face {
  font-family: 'FontColors';
  src: url('{{ 'colors.eot' | asset_url }}');
  src: url('{{ 'colors.eot?#iefix' | asset_url }}') format('embedded-opentype'), url('{{ 'colors.woff' | asset_url }}') format('woff'), url('{{ 'colors.ttf' | asset_url }}') format('truetype'), url('{{ 'colors.svg' | asset_url }}') format('svg');
 

  font-weight: bold;
  font-style: normal;
  font-display: swap;
  
}

to this;

@font-face {
    font-family: 'colors';
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?v=1673370439');
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?v=1673370439?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff2?v=1673370439') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff?v=1673370440') format('woff'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.ttf?v=1673370439') format('truetype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.svg?v=1673370439#colors') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

i am still only seeing this font/icons work via safari and mobile - chrome browser on desktop doesn’t seem to read the files - any ideas? :folded_hands: :folded_hands:

27

Hey! I’m not sure if this would help but I always remove the “?=v000000000” bit from my urls for fonts/images/etc and everything works fine, so in your case I would be using this:

@font-face {
    font-family: 'colors';
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot');
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff2') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff') format('woff'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.ttf') format('truetype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.svg#colors') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Other than that I don’t see any difference between your CSS and the CSS I usually use, it all looks good.

Let us know if that little tweak helped.

28

Try removing https: so that it looks like below and see if it helps.

src: url('//cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?v=1673370439');

The above should solve any CORS issue that sometimes blocks resources from loading.

Good luck!

29

THANK YOU SO MUCH!!!

I spent an hour trying the older solutions from Shopify community. Finally I solved this!!!

30

Thank you so much

31

OMyGosh! It worked!! Thank you! I’ve also been fussing around with trying to load the fonts as assets for the last week or so!

I made a minor change to your example, instead of the file URL I used the file name and specified | file_url. See below:

@font-face { font-family: "SofachromeRg-Regular"; src: url("{{ 'SofachromeRg-Regular.ttf' | file_url }}") format("truetype"), url("{{ 'SofachromeRg-Regular.woff' | file_url }}") format("woff"), url("{{ 'SofachromeRg-Regular.woff2' | file_url }}") format("woff2"); font-style: normal; font-weight: normal; }
32

It has been a couple of years but this isn’t working for me. I have tried endlessly through so many community posts to add webfonts to my shop with zero luck. Any chance you could assist?

33

Crazy how this isn’t fixed two years later. Spent 3 hours on this before I found your solution.

34

Hey @shopbaileybee ,

Sure, what do you need help with? Can you paste in your code? Thanks