skip to Main Content

I built a project on the latest Roots/Sage 10.

I didn’t modify the bud.config.js and kept it as I cloned from the sage master branch.

Now I am trying to add a custom font by adding this to the app.css:

@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont.ttf?yh9ob") format("truetype"),
    url("../fonts/iconfont.woff?yh9ob") format("woff"),
    url("../fonts/iconfont.svg?yh9ob#baltimore") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

And I added the font files to the resources/fonts folder.

Folder structure:

- resources
|- fonts
|---- iconfont.svg
|---- iconfont.ttf
|---- iconfont.woff
|- images
|- scripts
|- styles
|---- app.css
...

When I run npm run build, it generates the assets files.
But the font files are not loading on the site.
And when I check the compiled app.[hash].css in the public folder, I can’t find anything similar to @font-face....
And I see this at the end of the bud build log:

⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map
⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map

When I run npm run dev, it shows the same message, and just hangs there. The assets are even not generated in the public folder other than manifest.json.

% npm run dev

> dev
> bud dev

⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map
⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map

Again, I didn’t configure anything on my own and I only have what I pulled from the sage repo’s latest commit.

It’s a bit frustrating that the sage default setup is not handling this simple style addition.

Does anyone know if I have to configure anything for the custom font definition?

Currently, the root/sage10 documentation is very thin and I can’t seek what I need.

Looking for help!

Thanks in advance…

2

Answers


  1. Use ~@fonts.

    Example:

    src: url(~@fonts/iconfont.ttf?yh9ob) format('truetype')
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search