I added a new custom font but it's not displaying correctly

[cardboardhouse]

Hey all,

So I added a custom font called BungeeInline-Regular to my assets folder, added the code in to my main.css and when I inspect the page, it shows as the nav header being the BungeeInline-Regular but the font is not what it should be 😞

Could someone let me know where I've had a mistake?

Currently showing as this:

But the font should look like this;

https://www.cardboardhouse.store/
CBH25

thanks a lot

[cardboardhouse]

Thanks for your reply, here is what I have;

Theme.liquid

<style>
@font-face {
font-family: 'BungeeInlineRegular';
src: url('{{'BungeeInlineRegular.woff' | asset_url}}');
}

@font-face {
font-family: 'BungeeInlineRegular';
src: url('{{'BungeeInlineRegular.woff2' | asset_url}}');
}
</style>

Main.css file:

@font-face {
font-family: ‘BungeeInlineRegular’;
src: url(https://cdn.shopify.com/s/files/1/0889/1881/9159/files/BungeeInline-Regular.woff?v=1747734346) format(‘woff’);
}

tagname or .classname or #id{

font-family: BungeeInlineRegular;

}

@font-face {
font-family: ‘BungeeInlineRegular’;
src: url(https://cdn.shopify.com/s/files/1/0889/1881/9159/files/BungeeInline-Regular.woff2?v=1747734346) format(‘woff2’);
}

tagname or .classname or #id{

font-family: BungeeInlineRegular;

}

Selecting the font for my nav header
#shopify-section-sections--24453134909783__header > store-header > header > div.header__logo.logo.text-center.flex.js-closes-menu > h1 > a > span{
font-family: 'BungeeInlineRegular' !important;
}

I confirmed I added the font to assets folder correctly, and the link is pulling from the files I added.

Do you see any issues?

[tim]

This:

Shopify damages font files uploaded to theme assets.

You need to upload your font-files into Content=> Files in your admin and use file_url instead of asset_url in your code.

It was ok to upload fonts to assets, but some time ago Shopify started damaging them 😞

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

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.

---

[cardboardhouse]

Thanks for your help.\

I actually got it working, however the beauty of this font is the inline white, but the font isn't displaying that feature for some reason. If you look at my image header vs the style below you can see 😞

Any idea if it's possible to fix?

[tim]

Looked at it briefly -- looks like text is output in several layers in different fonts one on top of another.

See https://djr.com/bungee#color-styles 

Or get another version of the font, like the Outline? https://fonts.google.com/?selection.family=Bungee&query=bungee 

It's also possible that .ttf does not support this (but this is just a guess)?