snowpack woff2 font won't load

Question

snowpack super fast than webpack. but I fetch some problem like when I import font-awesome my react project it fail. cause snowpack won't load font (.woff2) file.

snowpack official website not about this topic.

now how to fix it?

Answer 1

Well, right now it's a pain. I'll explain why.

The theory:

1. [Skip to the bottom if you don't use PostCSS] Use Snowpack plugin-postcss along with PostCSS postcss-import plugin. Your PostCSS config could look like this:

module.exports = {
  plugins: {
    'postcss-import': {},
    // Other plugins...
  }
}

2. If you don't want to fix all @font-face paths, your CSS need to be in a subfolder like css/app.css, because Font Awesome CSS imports fonts fonts in a relative way (../webfonts).

@import '@fortawesome/fontawesome-free/css/all.css';

/** Your CSS rules... **/

3. Last step, you should mirror the node_modules/@fortawesome/fontawesome-free/webfonts directory into the webfonts directory of your build destination (mine is _dist). This could be solved easily with the following code in your snowpack.config.js:

"mount": {
  "node_modules/@fortawesome": {
    "url": "/webfonts",
    "static": true,
    "resolve": false
  }
}

But it won't work in production because of this issue, basically Snowpack can't mirror anything from node_modules because this folder is hardcoded-excluded.

I found a workaround using the ncp package (npm i --save-dev ncp) and the @snowpack/plugin-run-script. Add the plugin to snowpack.config.js and set the cmd option to look like this:

"plugins": [
  ["@snowpack/plugin-run-script", {
    "cmd": "ncp node_modules/@fortawesome/fontawesome-free/webfonts/ _dist/webfonts"
  }]
]

This will copy the Font Awesome webfonts folder contents into the web root folder named webfonts, so CSS relative imports will work.

If you don't use PostCSS, mount the folder at step 3 (will work in dev mode, not in production), use ncp as explained (will solve the issue in production) and add this line to your application JavaScript entry point:

import '@fortawesome/fontawesome-free/css/all.css';