DEV Community

Cover image for Workaround for font-face Urls in ParcelJS
Davina Leong
Davina Leong

Posted on

Workaround for font-face Urls in ParcelJS

#javascript #tutorial #devtips

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");
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)