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

sage
1

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

2

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?

3

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
4

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.

5

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?

6

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?

7

also do you have gulp watch runing

8

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)

Schermata 2016-04-30 alle 19.43.53.png1362×912 102 KB

Here the CSS-inspector tab

Schermata 2016-04-30 alle 19.51.23.png470×568 42.3 KB

Here the inspector on the network/font tab

Schermata 2016-04-30 alle 19.46.59.png2848×700 66.4 KB

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

9

what does your consol error say?

10

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

11

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

12

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:

13

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

1 Like
14

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

15

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.

16

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!

17

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