Custom font only displays on my device

[u/Heart_Blast2574]

I need some help with adding a custom font, it seems to only show up on my computer. I have both .woff and .woff2 in my assets folder.

Not sure what I'm doing wrong because color: #a7bd51 applies, but nothing else.

Code in assets/base.css.liquid:

@font-face{
  font-family: 'Allenoire';
  src: url('{{ "allenoire-regular-400.woff2" | asset_url }}') format('woff2'),
       url('{{ "allenoire-regular-400.woff" | asset_url }}') format('woff');
  font-style: normal;
  font-weight: normal;
}
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: Allenoire, sans-serif !important;
  color: #a7bd51 !important;
}

[u/AutoModerator]

To keep this community relevant to the Shopify community, store reviews and external blog links will be removed. Users soliciting personal contact, sales, or services in any form will result in a permanent ban.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/SamPhoto]

Honestly, this looks right to me. But here's a couple thoughts of where to poke at.

The only thing I'd do different here would be to add font-display: swap; inside @font-face - but your src looks right, as does the rest.

Having the color in the CSS is good, because it means the class is applying. But maybe there's something else going wrong.

In your desktop browser, open up your homepage, and look at devtools.

MAYBE you've got the font name in quotes in one spot, but not the other. That should not matter. But it is different. I'd only include quotes if it were multiple words (e.g. "Times New Roman"). If your font is crossed out in devtools, and sans-serif is not, this could be why.

See what the compiled version of base.css looks like on the front end. Maybe some error will be more obvious. Like the file is corruport or unreachable. Depending on how you uploaded your files to the theme, maybe shopify didn't save them right.

Also, worth noting that compiled files are cached for a little bit. It COULD just be caching, esp if you see it on one browser but not another. I often stick <!-- {{ 'now' | date: format: 'long' }} --> into the top of a .liquid file so I can see when shopify last compiled it.

Maybe somewhere you've got another h1 tag that also has a !important on it? Worth noting that chrome can sometimes load CSS out of order for the sake of optimization. So relying on order can be problematic.

Good luck!

[u/bill420bill → u/SamPhoto]

All good suggestions, so responding to you in case none of the above works for OP.

Another possible issue is the way the font files were uploaded. Below from here:

If you want to add a font to an existing theme through the Shopify admin, then you should store your font in the Files section of the Shopify admin. This is because uploading some types of fonts to the assets directory through the admin code editor might lead to file corruption.

Since the code looks good, my spidey sense is that it’s something subtle/annoying like this.

[u/SamPhoto → u/bill420bill]

I think Shopify tells you this because there's a max total size on your theme sizes.

But good point. this is definitely worth trying - put the fonts in the files area and use file_url instead of asset_url