@beyonk/google-fonts-webpack-plugin NPM

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