Custom fonts not appearing in Safari

[kcino17]

Hello,

I uploaded the Mona Sans variable font to my Shopify page but it seems to only appear on Google Chrome - it does not appear on Safari or mobile platforms. Does anyone know how to have the font appear across all platforms? The @font-face block is as follows:

 @font-face {
font-family: "Mona Sans", sans-serif;
src: url("{{ 'MonaSans[wdth_wght].woff' | asset_url }}") format("woff");
font-weight: 100 900;
font-display: swap;
}

Can anyone identify what's wrong/what I need to add?

Thanks so much in advance! Appreciate the support.

[KetanKumar]

@kcino17 
1. Go to Online Store->Theme->Edit code
2.Asset->/theme.css.liquid ->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
3. Asset->/theme.css.liquid ->paste below code at the bottom of the file.

@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

 can you please just change font name, for example, Montserrat-Regular to your custom font name

[tim · Accepted solution]

Bunch of possible reasons.

First (definitely):

what is  'MonaSans[wdth_wght].woff'  -- I believe you're supposed to replace underlined portion with width and weight values?

Do not know where you've gotten this font from, but https://github.com/github/mona-sans?tab=readme-ov-file#usage has no square braces...

Second (possibly) -- if you've pasted the code into assets/xxxx.css file, then the Liquid code ({{ 'MonaSans[wdth_wght].woff' | asset_url }}) will not be processed and will be output as as, resulting in invalid URL.

Best way to fix this is to add this CSS code (with fixed filename, of course) into "Custom Liquid" section in Header or Footer groups and wrap it with <style>...</style> tags.

Third (possibly) -- Shopify often modifies contents of font files uploaded to assets so they are no longer valid. You'd rather upload them to Files and use file_url filter instead of asset_url.

You may still see this font in your main browser - Chrome because you've researched this font in this browser and it is cached by the browser.

Share a link to your store for more help.

[kcino17]

Thank you, moving the code into the Custom Liquid and changing the file name worked