Cannot get @font-face to work with Sage/Sass

Hi,

Has anyone encountered a problem of @font-face not working with Sage. It probably has nothing to do with the theme directly, but perhaps with Sass and how it is compiled?

This is code that I have (_global.scss, generated with webfont-generator):

@font-face {
  font-family: 'brandon_grotesque_regularRg';
  src: url('hvd_fonts_-_brandongrotesque-regular-webfont.eot');
  src: url('hvd_fonts_-_brandongrotesque-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('hvd_fonts_-_brandongrotesque-regular-webfont.woff2') format('woff2'),
  url('hvd_fonts_-_brandongrotesque-regular-webfont.woff') format('woff'),
  url('hvd_fonts_-_brandongrotesque-regular-webfont.svg#brandon_grotesque_regularRg') format('svg');
  font-weight: normal;
  font-style: normal;

}

h1 {
  font-family: 'brandon_grotesque_regularRg';
  font-size: 16px;
}

I’ve pasted font files in both folders - where _global.scss lives and where main.scss lives (as this file imports _global.scss). Even with this, I has no luck getting the fonts to be rendered. Interestingly, when I inspect text with Chrome dev tools, the css rule is applied correctly.

Do you have any idea wht the problem might be?

Thanks

This is saying that font files are in the same folder as the compiled CSS file. Is that true?

Are you getting any errors in the console?

Here’s what I do:

Put all you font files in a “fonts” folder.

This should be located in “assets” you probably already have one for glyph icons.

Run gulp

Then your src is this:

Src: url(…/fonts/webfontname.eot)

3 Likes

Thank you guys. Your advice solves the problem. Appreciated!

I’m also happy that this post was inspiration for @drawcardau . A piece of good work, indeed.

I did the same this as @luqo33 & @erikkowalski but for me doesn’t work.
I put the fonts into the assets/fonts as required, then in my scss

@font-face { font-family: 'Apercu', sans-serif; src: url('../fonts/Apercu-Bold.eot'); src: url('../fonts/Apercu-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Apercu-Bold.woff') format('woff'), url('../fonts/Apercu-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; };

but it doesn’t work.
I went into the web-inspector in chrome in the network tab and it doesn’t show any font loaded.
Any idea?

Need more info to determine the issue, can you show a screen shot of the web inspectors styles tab? and or more of your css file?

also do you have gulp watch runing

So this is my scss and it’s properly nested into the mains.scss ( because then I can see “Apercu”, sans-serif in the chrome inspector)

Here the CSS-inspector tab

Here the inspector on the network/font tab

Aaaaand of course gulp is running/watching and I’ve already done the “gulp” task so the fonts are in dist/fonts

what does your consol error say?

Nothing about that, 1 warning of ScrollMagic & 1 warning and 1 error about Analytics

So if there is no 404 on the font files… then they’re being loaded, right?

GLOBAL REPLY:
@erikkowalski & @kalenjohnson i finally solved that. I didn’t figure out why it wasn’t working so I decided to try another random font and everything was fine, so I tried another font-face converter (fontsquirrel ) and now as you can see at www.wearearzt.com everything is fine.
So I think was a font-conversion problem :slight_smile:

great news! nice looking site, I always use font squirrel to generate my @fontface packages.

1 Like

How did you figure out it was a font-conversion problem? I have the same path and I can’t get this to work.

Troubleshooting. I tried some other fonts and everything works fine so I thought it was a font-conversion because I converted it for the site. That’s all.

Hi there,

I have another problem, I use a customize font and put the font in public/uploads/default/original/1X directory and add some CSS @fontface in the setting.
At first, it works fine and every font has changed but now [without does any thing] I get

file not found error (404)
in Chrome console.

The fonts are still there and owner of the directory is discourse and the group is www-data and has all the required permission.

I don’t know what happen.
can anyone help me, please!

It looks like you’ve uploaded the font in the wrong directory. It needs to be in /wp-content/themes/themename/resources/assets/fonts - or your bedrock theme directory.

Your css will look like:

@font-face {
font-family: “PlayfairDisplay-Regular”;
src: url("…/fonts/PlayfairDisplay-Regular.ttf");
}

.heading {
font-family: “PlayfairDisplay-Regular”;
}

1 Like