Workaround for font-face Urls in ParcelJS

Hello world!

I would like to share my (hacky) workaround for those having issues with trying to get the urls in font-face to work without errors in ParcelJS.

Steps

1. Run parcel in your terminal to make sure all your HTML files have been created inside the /dist folder that is generated when you run the command for the first time.
2. Kill the parcel process. (Win and Mac: Ctrl+C)
3. Create a folder in the /dist folder to store your fonts (Example: /fonts), and move your font files into it.
4. Create a .css file with your @font-face code in it. (I named it font-faces.css) (Sample code below)
5. Import the font-faces.css into each of your HTML files via the <link> tag.
6. Run parcel <your-html-file.html> again and refresh your web browser. If done right, you should see your fonts loaded properly.

Sample code:

@font-face{
  font-family: "Montserrat";
  font-weight: 100;
  font-style: normal;
  src: url("./fonts/montserrat/Montserrat-Thin.ttf"), format("truetype");
}

Some Notes/Tips

• Version 1.10.3 of ParcelJS was used at the point of writing this workaround.
• You'll have to resort to plain ol' css for importing fonts via @font-face.
• Do not include the <link> to the font-faces.css in the original HTML files. As this may result in the same errors as trying to bundle @font-face in SASS. Include it in the HTML files in the /dist folder.

Hope this helps anyone facing these issues.

Others

In case this helps anyone, I'm also sharing the gist I wrote to help generate the @font-face code quickly. To use it, simply run node gen-fontface in your terminal and copy the output into your CSS file.

Updates

• Added another tip
• Added Others section