Custom fonts not compiling in Sage 10

sage
1

Hi there.

I am trying to load in custom fonts with a test in <app.scss> using:

@font-face {
  font-family: "Circular";
  src: url("../fonts/CircularXXSub-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

.test-class {
  font-family: Circular;
}

After running yarn build the font does not render and isn’t being compiled anywhere. The file path is relative to <app.scss>

I’ve installed bud-postcss and bud-sass and all .scss files are otherwise working fine.

Are there other steps that need to be taken to get custom fonts working? Seems like something basic I am missing here.

Many thanks for your help.

2

Can you post your bud.config.mjs. file? I had a similar issue recently (see [bug] Asset paths in CSS break if publicPath isn’t defined in bud.config.mjs when upgrading to Bud 6.1 · Issue #1547 · roots/bud · GitHub) but not sure if that’s your issue without more context.

1 Like
3

Thanks @tedw.

I had a look at your github issue post (and appreciate your exhaustive notes). Adding .setPublicPath("../") seems to have worked!

For reference then my bud.config.js (before adding your fix) is below. It’s pretty much out-of-the-box.

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets("images")

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch("resources/views/**/*", "app/**/*")

    /**
     * Target URL to be proxied by the dev server.
     *
     * This should be the URL you use to visit your local development server.
     */
    .proxy("http://<name>.local:<port>")

    /**
     * Development URL to be used in the browser.
     */
    .serve("http://127.0.0.1:<port>.");
};

I’m not familiar at all with the workings of bud but noticed in the docs for bud.setPublicPath there is mention of the public path being different in different environments (which makes sense). Do you know if setting .setPublicPath("../") will have problems in say production?

My thanks again.

4

Please don’t set a public path like that. The proper solution to this is to actually set the public path. This is now a requirement moving forward in Sage 10, and was always required in Sage 9. See the PR or the latest Bud config in Sage 10 for an example, along with the Bud release notes for further information.

    /**
     * URI of the `public` directory
     */
    .setPublicPath("/app/themes/sage/public/");
5

Many thanks @ben.

Works with .setPublicPath("/wp-content/themes/<theme>/public/")

2 Likes