Google Fonts Webpack Plugin

Compatible with Webpack >= 4.14.0 and >= 5.0.0

Download Google fonts to webpack build folder using google-webfonts-helper or use CDN to integrate with html-webpack-plugin.

Install

npm install @beyonk/google-fonts-webpack-plugin

Usage

/webpack.config.js

const GoogleFontsPlugin = require("@beyonk/google-fonts-webpack-plugin")

module.exports = {
	"entry": "index.js",
	/* ... */
	plugins: [
		new GoogleFontsPlugin({
			fonts: [
				{ family: "Source Sans Pro" },
				{ family: "Roboto", variants: [ "400", "700italic" ], display: "block" }
			]
			/* ...options */
		})
	]
}

Options

new GoogleFontsPlugin(options: Object)

|Name|Type|Default|Description| |----|----|-------|-----------| |fonts|FontObject[]|-|Configuration generated by Fontello.com. |name|String|"fonts"|Module name. |filename|String|"fonts.css"|Css file name. |path|String|"font/"|Relative path to fonts directory. If path is undefined fonts are not downloaded, the css file is generated with Google hosted font files. |local|Boolean|true|Whether to use google-webfonts-helper API or just link to Google Fonts hosted css. If this option is set to false this plugin just adds the css url to html-webpack-plugin (if present). |noLocalInCss|Boolean|false|Whether to prepend local(FontName) expression before font files in CSS file (see MDN). |formats|Array|[ "eot", "woff", "woff2", "ttf", "svg" ]|Font formats to download. |apiUrl|String|"https://google-webfonts-helper.herokuapp.com/api/fonts"|google-webfonts-helper API url.

FontObject

|Name|Type|Default|Description| |----|----|-------|-----------| |family|String|-|Font family. |variants|Array|-|Font variants according to google-webfonts-helper (e.g.: [ "italic", "500", "700italic" ]). |subsets|Array|-|Font subsets according to google-webfonts-helper (e.g.: [ "latin", "greek" ]). |formats|Array|-|Font formats to download. Defaults to options.formats. |display|String|"swap"|Font Display|