Custom fonts not displaying on mobile

[abigailzug]

I'm using the Refresh theme and trying to use custom fonts on my store. I continue to run into the problem where my custom fonts are showing up on desktop devices but not mobile.

I've followed the instructions here to host my fonts through the Shopify admin (by uploading to Content > Files)

https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#shopify-admin

And have added the following code to assets/base.css:

@font-face {
font-family: 'Recoleta';
font-weight: 900;
font-style: black;
font-display: swap;
src: url('https://cdn.shopify.com/s/files/1/0587/6095/4053/files/recoleta-black-font.woff2?v=1683866032') format('woff2'), url('https://cdn.shopify.com/s/files/1/0587/6095/4053/files/recoleta-black-font.woff?v=1683865450') format('woff');
}

Can anyone help me out?

[tim]

The @font-face rule looks good.

The best next step would be to share a (preview) link to your store.

[abigailzug]

Store link is here! https://sweetpotatosoapco.com/

PW is: libroo

Thanks!

[tim · Accepted solution]

Somehow, I noticed that this is a popular mistake when adding code to base.css. 
You've pasted your custom code inside @media condition.
This particular condition only applies nested rules if current device supports hover. Mobile do not have hover and therefore your @font-face is not executed on mobiles.

Simply move the code you've added to be below the closing curly brace.

Also -- one of the URLs there is broken now -- your initial code above was better. Also note that liquid code would not work inside this file.

[abigailzug]

Thank you SO MUCH. I moved the code outside of that @media condition and reverted to my previous code. Worked perfectly!