google-fonts-webpack-plugin

google-fonts-webpack-plugin copied to clipboard

Hi,

I know this plugin is not developed anymore, written for WP4, but right now it's somewhat compatible with WP5 yet few features stopped working, probably caused by hook name changes (i. e. compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration does not exist anymore). I wasn't able to make a quick fix in code, as I don't understand webpack, html plugin nor this plguin enough to make it work again. Maybe I'll immerse into it one day but I doubt it. Nonetheless I've made quick&dirty workaround for generating link tag in HTML without creating a template like an answer in Issue #8 suggests based on https://github.com/jantimon/html-webpack-plugin#beforeassettaggeneration-hook

Heres the code you can paste directly to webpack.config.js (or anywhere else and include it using require):

class InsertFontCSS {
	constructor(url) { this.url = url; }
	apply(compiler) {
		compiler.hooks.compilation.tap('InsertFontCSS', (compilation) => {
    			HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync('InsertFontCSS',
				(data, cb) => { data.assets.css.push(this.url); cb(null, data) }
			)
		})
	}
}

Than it's enough to use furher in wp configuration:

plugins: [
	new GoogleFontsPlugin({
		fonts: [
			{ family: "Source Sans Pro" },
			{ family: "Roboto" },
			{ family: "Vollkorn" }
		],
		local: true
	}),
	new InsertFontCSS("./fonts.css"),
	new HtmlWebpackPlugin({ "title": "My fonts are working, yay!" }),
]

This works for me, although would be nice if the package was being maintained again.

We don't use Webpack any more so it won't be maintained. Happy for somebody to take it over.