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-pluginUsage
/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 |