Custom fonts aren't working no matter where I put the @font-face files

Store Design
, ,
1

I’m working on the site sillygeorge.com, and I’m trying to add some new fonts for a rebrand. I already added the fonts to my files on the site, and I have the font face code ready to be added somewhere in the code of the website, but I don’t know where. I’ve tried putting the code in the theme.liquid file at the top of the head, the bottom of the head, and the bottom of the body. I’ve tried adding the code to the styles.css.liquid file, and either way I’m not able to get the fonts to apply on a page.

Here’s the font code:

@font-face {
font-family: ‘Moderat’;
src: url(‘https://cdn.shopify.com/s/files/1/1767/7281/files/Moderat-Regular.woff?v=1746826371’) format(‘woff’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Moderat Bold’;
src: url(‘https://cdn.shopify.com/s/files/1/1767/7281/files/Moderat-Bold.woff?v=1746826371’) format(‘woff’);
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Moderat Condensed’;
src: url(‘https://cdn.shopify.com/s/files/1/1767/7281/files/Moderat-Condensed-Bold.woff?v=1746826371’) format(‘woff’);
font-weight: bold;
font-style: normal;
}

And then I was trying to add it to a block in the custom css of the online store editor, like this:

.collection_title {

font-family: Moderat Bold;
font-size: 2rem;
}
p {

font-family: Moderat;
font-size: 1.2rem;
}

What am I missing? What am I doing wrong?

2

Hi @jasminsharp97
Firstly convert the font to webfonts and then upload those to files.
Web fonts generally contains all supported font formats like: TTF, OTF, WOFF, WOFF2 or SVG etc…

You can use any online tool to convert into webfonts
and then place the font face code at appropriate place, you can put that in theme.liquid before closing tag
and then use fonts at any place where you like
Please check if it works for you

Thanks!

3

Are your font declarations wrapped in a style tag? Like this:

... ... ...
4

This solved it, I was missing the style tags. Thanks!