Handle font assets during build

[PeterBooker]

By default the font assets are not touched during build, until @wordpress/scripts:14.0.1 which adds a rule that dumps the font files at /fonts/* which is not very useful.

We would like for them to be bundled into path/to/theme/build/ or path/to/theme/build/fonts with the other static assets.

I used our project specific webpack.config.js to resolve the issue for now with these additions:

config.module.rules.pop(); // Removes font rule added in @wordpress/scripts v14

config.module.rules.push( {
	test: /\.(woff|woff2|eot|ttf|otf)$/,
	loader: 'file-loader',
	options: {
		name: '/content/themes/lottstift-theme/build/[name]-[contenthash].[ext]',
	},
} );

However, it would be ideal to have this built into project base and to avoid having the hardcoded path.

[PeterBooker]

Quick update, my above webpack config does not work at all. It worked locally from a combination of different configs (to get both the Path and URL correct) but neither one works alone.

I just had to remove all the webpack config above, rely on the inbuilt fonts rule in @wordpress/scripts:14.0.1 which outputs to /fonts/** and then use linux commands in the package.json build script to move the files to the correct location (themes build dir).

I have tried to work out a better fix, but my webpack understanding is missing something. I do not understand how you manage it when the Path and URL is different e.g. /packages/themes/{theme-name}/ vs /public/content/themes/{theme-name}-theme/. Hopefully someone more familiar with webpack can solve it.

@zpaceinvader made a good point yesterday in Slack about project-base needing to handle more than just themes bundling fonts, which I also hadn't considered. So this is a more complex issue than I had outlined above.

[walbo]

module: {
	...defaultConfig.module,
	rules: [
		{
			test: /packages\/themes\/dekode-theme\/.*\.(woff|woff2|eot|ttf|otf)$/,
			use: [
				{
					loader: 'file-loader',
					options: {
						name: '[name].[hash:8].[ext]',
						outputPath: 'packages/themes/dekode-theme/build/fonts',
						publicPath: 'fonts',
					},
				},
			],
		},
		...defaultConfig.module.rules,
	],
},

Will take a closer look to see if we can fix to you don't have to set the theme same in the config.

[Clorith]

Related #295 (also touches on the assets like fonts and images and having them moved to the respective build directories)

[henningdekode]

@PeterBooker and @walbo is this still an open issue that needs to be handled?

[stian-overasen]

Fonts are handled by theme.json now. Can we close this issue @PeterBooker ?

[PeterBooker]

Yes, lets consider this closed @stian-overasen!