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.

	const fontPath = './fonts/';
	const montserrat = 'Montserrat';
	const ptmono = 'PT Mono';
	const ptsans = 'PT Sans';
	const ptserif = 'PT Serif';
	const normal = 'normal';
	const regular = 'normal';
	const bold = 'bold';
	const italic = 'italic';
	const array = [
	{
	fontFamily: montserrat,
	fontWeight: 100,
	fontStyle: normal,
	fontPath: 'montserrat/Montserrat-Thin.ttf'
	},
	{
	fontFamily: montserrat,
	fontWeight: 100,
	fontStyle: italic,
	fontPath: 'montserrat/Montserrat-ThinItalic.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 200,
	fontStyle: normal,
	fontPath: 'montserrat/Montserrat-ExtraLight.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 200,
	fontStyle: italic,
	fontPath: 'montserrat/Montserrat-ExtraLightItalic.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 300,
	fontStyle: normal,
	fontPath: 'montserrat/Montserrat-Light.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 300,
	fontStyle: italic,
	fontPath: 'montserrat/Montserrat-LightItalic.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: normal,
	fontStyle: normal,
	fontPath: 'montserrat/Montserrat-Regular.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: normal,
	fontStyle: italic,
	fontPath: 'montserrat/Montserrat-Italic.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 500,
	fontStyle: normal,
	fontPath: 'montserrat/Montserrat-Medium.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 500,
	fontStyle: italic,
	fontPath: 'montserrat/Montserrat-MediumItalic.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 600,
	fontStyle: normal,
	fontPath: 'montserrat/Montserrat-SemiBold.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 600,
	fontStyle: italic,
	fontPath: 'montserrat/Montserrat-SemiBoldItalic.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: bold,
	fontStyle: normal,
	fontPath: 'montserrat/Montserrat-Bold.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: bold,
	fontStyle: italic,
	fontPath: 'montserrat/Montserrat-BoldItalic.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 800,
	fontStyle: normal,
	fontPath: 'montserrat/Montserrat-ExtraBold.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 800,
	fontStyle: italic,
	fontPath: 'montserrat/Montserrat-ExtraBoldItalic.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 900,
	fontStyle: normal,
	fontPath: 'montserrat/Montserrat-Black.tff'
	},
	{
	fontFamily: montserrat,
	fontWeight: 900,
	fontStyle: italic,
	fontPath: 'montserrat/Montserrat-BlackItalic.tff'
	},
	{
	fontFamily: ptmono,
	fontWeight: normal,
	fontStyle: normal,
	fontPath: 'pt_mono/PTM55FT.tff'
	},
	{
	fontFamily: ptsans,
	fontWeight: regular,
	fontStyle: regular,
	fontPath: 'pt_sans/PT_Sans-Web-Regular.ttf'
	},
	{
	fontFamily: ptsans,
	fontWeight: regular,
	fontStyle: italic,
	fontPath: 'pt_sans/PT_Sans-Web-Bold.ttf'
	},
	{
	fontFamily: ptsans,
	fontWeight: bold,
	fontStyle: regular,
	fontPath: 'pt_sans/PT_Sans-Web-Italic.ttf'
	},
	{
	fontFamily: ptsans,
	fontWeight: bold,
	fontStyle: italic,
	fontPath: 'pt_sans/PT_Sans-Web-BoldItalic.ttf'
	}
	];
	/*
	Sample css
	@font-face {
	font-family: "Montserrat", "Arial", "Helvetica", sans-serif;
	font-weight: 100;
	font-style: normal;
	src: url("ed198fec8e66ef518e736a3e7839fcb6.tff"), format("truetype");
	}
	*/
	array.forEach((e, i) => {
	console.log(
	"@font-face{\n" +
	`\tfont-family: "${e.fontFamily}";\n` +
	`\tfont-weight: ${e.fontWeight};\n` +
	`\tfont-style: ${e.fontStyle};\n` +
	`\tsrc: url("./fonts/${e.fontPath}"), format("truetype");\n` +
	"}\n"
	);
	});

view raw gen-fontface.js hosted with ❤ by GitHub

Updates

• Added another tip
• Added Others section