No /fonts/ in dist after compiling

sage
1

Hi,

First project using Roots 9 and just getting to grip with the new theme / framework.

I’m having issues with getting my /assets/fonts/ files compiling.

I run yarn build fine, it loads the font-face in the SCSS with correct paths, but the fonts don’t show in the front-end. On investigation, I can see there is no ‘/dist/fonts’ folder after compilation.

Where can I ensure this gets added in /dist/ compilation - it has 20 font files in the folder (i.e not empty), but /fonts/ doesn’t get added into /dist. Is there an extra step I’m missing? So I need to add /fonts/ somewhere in the theme to be included in /dist?

Thanks!

2

Are the fonts used in your styles?

3

Yes, it’s referenced in the @font-face setting and in styles.

4

Fixed this - it was a path/to/webfont from CSS error.

7

For clarity and for anyone else who might run into this issue, do you mind writing out how you solved this? I think this could really help future users of this forum.

8

I just started with Sage also and found myself in the exact situation. Loaded fonts into assets/fonts/ and had copied a font-face mixin from someone. I fixed my path problem by setting two things:

  1. traveling up once to reach fonts/ (e,g, ../fonts/Lato/Lato-Regular.ttf)
  2. wrapping the relative path in the url() function (e.g. url('../fonts/Lato/Lato-Regular.ttf'))

Webpack then identified the font dependency and created fonts/ in the dist build.

9

I’m experiencing this same problem. If anybody has any ideas or comments on how they fixed this I’d like to know.
I have fonts in my assets/fonts folder. These are referenced in my _font.scss partial (pulled into my main.scss above other partials using this).

@font-face {
  font-family: "ScotchText";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/scotch/scotchtext-black.woff2") format("woff2"), url("../fonts/scotch/scotchtext-black.woff") format("woff");
}

Running yarn build doesn’t copy the fonts folder over to dist.
I’m running sage 9.0.9.

10

I’m in the same boat guys, I managed to get /fonts directory compiled in /dist (with @ rybot help) but now when attempting to use the fonts in my SCSS files I just get the error Unexpected missing generic font family font-family-no-missing-generic-family-keyword

The fonts are compiled correctly in /dist and I use the following code from myfonts.com:

@font-face {

font-family: “TTNormsPro-Regular”;
src: url("…/fonts/ttnorms/3A4E6E_2_0.eot");
src: url("…/fonts/ttnorms/3A4E6E_2_0.eot?#iefix") format(“embedded-opentype”), url("…/fonts/ttnorms/3A4E6E_2_0.woff2") format(“woff2”), url("…/fonts/ttnorms/3A4E6E_2_0.woff") format(“woff”), url("…/fonts/ttnorms/3A4E6E_2_0.ttf") format(“truetype”);
}

When I inspect the source code the paths to font files in main.css seem correct, I just don’t see where this stylelint error is coming from :frowning:

Any ideas where I’m going wrong with this?

11

Did you read the error? It tells you what’s wrong. The first result on google for font-family-no-missing-generic-family-keyword explains exactly what the problem is: You aren’t include a generic font family in your definition.

12

Hi Alwaysblank yes of course I read the error and searched on Google. I also searched on this forum but could only find another post relating to font awesome with no solution. I wasn’t able to get it working, so decided to post here for some help :grinning:

13

I’d suggest that you did the right thing, @digitalmad (although, perhaps your question could’ve been in its own thread) - sometimes people can be a little patronising if you don’t understand or see something exactly as they do - but it is the internet, after all. Sage 9 and its tools can be a very steep learning curve so don’t get discouraged.

@alwaysblank’s message probably gets you as far as you’d already got, so to extend on that further - you simply have to add a “generic” font family, such as serif or sans-serif to your previous code - ie font-family: “TTNormsPro-Regular”, sans-serif;

1 Like
14

That is very helpful @doug exactly what I missed, thank you kindly!

1 Like
15

Although, just looking back at your previous code - you’re defining the font rather than using it, so you can probably drop the generic font, but use it for when you call the font on an element.

So to be clear - your code above can probably stay as font-family: “TTNormsPro-Regular”; and then when you style an element it would be more like:

h1 {
  font-family: “TTNormsPro-Regular”, sans-serif;
}

Let me know if that makes sense.

1 Like
16

Yes, I just noticed that as well, your assistance with the generic font family solved the stytlint error but then the fonts were not loading. It would appear the generic font family should only be used on the selector and not the @font-face as well :smiley:

Top man @doug