Roots Discourse

Sage 9 - Fonts not in dist/fonts/ after build

I’ve been having an issue with custom fonts not making it into the “dist” directory.

The build process happens without error whether standard or production, lint also works without issue, but at the end there is no “dist/fonts” folder.

Here’s what my _fonts.scss file looks like.

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Italic.eot");
  src:
    url("../fonts/Lora-Italic.woff2") format("woff2"),
    url("../fonts/Lora-Italic.woff") format("woff"),
    url("../fonts/Lora-Italic.eot?#iefix") format("embedded-opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Regular.eot");
  src:
    url("../fonts/Metropolis-Regular.woff2") format("woff2"),
    url("../fonts/Metropolis-Regular.woff") format("woff"),
    url("../fonts/Metropolis-Regular.eot?#iefix") format("embedded-opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Medium.eot");
  src:
    url("../fonts/Metropolis-Medium.woff2") format("woff2"),
    url("../fonts/Metropolis-Medium.woff") format("woff"),
    url("../fonts/Metropolis-Medium.eot?#iefix") format("embedded-opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-MediumItalic.eot");
  src:
    url("../fonts/Metropolis-MediumItalic.woff2") format("woff2"),
    url("../fonts/Metropolis-MediumItalic.woff") format("woff"),
    url("../fonts/Metropolis-MediumItalic.eot?#iefix") format("embedded-opentype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-Bold.eot");
  src:
    url("../fonts/Metropolis-Bold.woff2") format("woff2"),
    url("../fonts/Metropolis-Bold.woff") format("woff"),
    url("../fonts/Metropolis-Bold.eot?#iefix") format("embedded-opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("../fonts/Metropolis-ExtraBold.eot");
  src:
    url("../fonts/Metropolis-ExtraBold.woff2") format("woff2"),
    url("../fonts/Metropolis-ExtraBold.woff") format("woff"),
    url("../fonts/Metropolis-ExtraBold.eot?#iefix") format("embedded-opentype");
  font-weight: 800;
  font-style: normal;
}

And my public path from config.json

"publicPath": "/app/themes/roger",

Any help you could provide is deeply appreciated. Much thanks!

Are you referencing the fonts elsewhere in your CSS? IIRC the build process will only copy assets like fonts if it detects that they’re actually being used.

Yes, Metropolis is set as “$body-font-family” for Foundation framework, and Lora is used explicitly in a few classes.

Do the fonts work when running yarn start?

No they do not show up.

@alwaysblank, Any other ideas?

So far I’ve tried replacing the build directory with a fresh copy, verified the build commands in package.json and double checked the publicPath in config.json.

I’ve also verified that the _fonts.scss is being imported and I’ve added a simple font usage directly to the main.scss file just to see if the build process picks up on it.