How can I successfully load custom fonts in my CSS stylesheet?

[BirdhouseUSA]

I am trying to load two font files (.woff, and .woff) via my assets folder.

I've tried loading these in my CSS stylesheet, as well as tried a separate css.liquid stylesheet, but they're not working.

I have this code I'm using. The question I have is whether I need to use the .ttf and .eot versions as well to make these load.

@font-face {
font-family: "MuseoSansRounded-900";
src: url('webFonts/MuseoSansRounded900/MuseoSansRounded900.woff2') format('woff2'),
url('webFonts/MuseoSansRounded900/MuseoSansRounded900.woff') format('woff');
font-weight: normal;
font-style: normal;
}

h1 {

font-family: "MuseoSansRounded-900"!important;

}

[satsinghrana]

Hello Greetings!

This one needs to be the complete URL upload it to your Shopify files get link from there and replace this with the link.

webFonts/MuseoSansRounded900/MuseoSansRounded900.woff2

Let me know!

[BirdhouseUSA]

Here's the fonts in the asset folder (at the bottom):

This is what I have in my stylesheet, but it does not work. Am I missing something?

[alexfc]

Remove webfonts/ from the fonts url in the stylesheet.

[BirdhouseUSA]

I did, but they aren't loading correctly still 😕

[alexfc · Accepted solution]

The assets folder can't have subfolders. Remove the subfolder webFonts and adjust the CSS accordingly.

[BirdhouseUSA]

Thanks, I did remove the webFonts/ from my css, but these are still not loading correct 😕

[alexfc]

My bad, I meant remove everything on the url to the CSS but the font-name.ext

[BirdhouseUSA]

I just got it! I had to remove the second Museo/Museo! Thank you 😄