FROM CACHE - en_header

Loading Custom Fonts

Solved
BirdhouseUSA
Shopify Partner
52 3 18

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;

}

Birdhouse Web Design
Accepted Solution (1)

Accepted Solutions
alexfc
Shopify Partner
20 4 3

This is an accepted solution.

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

View solution in original post

Replies 8 (8)
satsinghrana
Shopify Partner
331 19 38

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!

Get Support for Customization right away CLICK HERE TO GET HELP NOW.
Our Shopify Apps: HERE
Please Like and Accept Solution if it helps you.
alexfc
Shopify Partner
20 4 3

This is an accepted solution.

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

BirdhouseUSA
Shopify Partner
52 3 18

fonts.png

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

fonts-loaded-in-assets.png

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

 

 

Birdhouse Web Design
BirdhouseUSA
Shopify Partner
52 3 18

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

Birdhouse Web Design
alexfc
Shopify Partner
20 4 3

Remove webfonts/ from the fonts url in the stylesheet.

BirdhouseUSA
Shopify Partner
52 3 18

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

removed-subfolder.png

Birdhouse Web Design
alexfc
Shopify Partner
20 4 3

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

BirdhouseUSA
Shopify Partner
52 3 18

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

Birdhouse Web Design