Using a custom font on debut theme not working

Solved
Omche
New Member
2 1 0

Hi there Shopify community,

I've been browsing through the various posts on here and tried the solutions in them but nothing seems to be working, I've spent 3-4 hours on this and have come to the end of my limited capabilities, any help would be greatly appreciated.

I don't have a theme.scss.liquid file, it's not in the debut theme of the shop I created. But this is what my theme.css file looks like:

Omche_0-1624427091072.png

As you can see I've added a few fonts and told the theme to use them, and the font does indeed change, but it changes to an odd serif font that I can't identify.

I've uploaded the fonts as assets and made sure to use the correct name:

Omche_2-1624427296408.png

When I inspect the HTML of my website the font name appears correctly and when I enable/disable it the font does change, but it's not the font I've uploaded. Here's an example:

Omche_3-1624427369113.png

And what the font should look like:

Omche_4-1624427394778.png

I thought that perhaps I had used the wrong font-family name so I tried using just "Overpass" to test it, and it's the exact same scenario, only the font-family name changes. When hovering over the font-family on inspection it even pops up and shows a preview, but it's not the right font.

Omche_5-1624427866084.png

I've tried to re-download from the font from Google Fonts and re-upload it and it's the same issue.

As I said, I'm really out of ideas, so any help would be greatly appreciated!

0 Likes
dmwwebartisan
Shopify Partner
7305 1723 2301

@Omche 

Hey there,

To add custom font in your theme. Please click here

Hope this helps!

Let me know if any problem

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Omche
New Member
2 1 0

This is an accepted solution.

To anybody searching for this exact problem I found a solution, which is painfully simple and annoying that Shopify have chosen to do it the way they do.

Simply rename your theme.css to theme.css.liquid. That's it.

0 Likes