Why are my custom fonts not displaying in Safari?

Store Design
, ,
1

Hi! I noticed my custom fonts are not showing up in Safari.

Can you please help me?

Store:

https://yemoja-skincare.myshopify.com/

yemoja2023

This is the code I used, after uploading the font to the assets folder:

@font-face {
font-family: 'columbiasans-light';
src: 
url('fonts/columbiasansw-light.woff2') format('woff2'),
url('fonts/columbiasansw-light.woff') format('woff');

Thanks so much!

2

Hi @GTStudio

Maybe I suggest you add code below to head

EBOOST_0-1675259911477.png
EBOOST_0-1675259911477.png668×391 9.88 KB
3

Thanks so much for your reply! Sadly it’s not working. Any other suggestions?

4

Hi @GTStudio

You try to check the table below

EBOOST_0-1675263216557.png
EBOOST_0-1675263216557.png1302×409 21.2 KB

And this one https://community.shopify.com/c/shopify-design/custom-font-not-showing-in-safari-mobile/td-p/1434175

5

This doesn’t seem to work for me :disappointed_face: I still can’t see the fonts in Safari, although I’m using a browser version that supports .woff and .woff2.

6

hi @GTStudio

I saw 404 here

EBOOST_0-1675265248471.png
EBOOST_0-1675265248471.png1501×781 279 KB

It should code below

@font-face {
	font-family: 'columbiasans-light';
	src: 
	url('columbiasansw-light.woff2') format('woff2'),
	url('columbiasansw-light.woff') format('woff');
}
7

I don’t understand; if it’s 404, why is it showing on other browsers? The font is definitely uploaded in the assets folder.

Anyway, I replaced the code with yours, but still nothing on Safari.