Add Google Fonts via CDN to HTMLWebpackPlugin, or download the fonts and use locally.
Install the plugin with npm:
$ npm i google-fonts-webpack-plugin -D NOTE: This plugin requires html-webpack-plugin@^2.10.0.
This plugin will add the given Google fonts to the html generated by html-webpack-plugin. Add an array of font names and the options for them into webpack using this plugin and they can be injected into the generated HTML via the Google CDN or locally served.
var HTMLWebpackPlugin = require('html-webpack-plugin');
var GoogleFontsWebpackPlugin = require('google-fonts-webpack-plugin');
...
module.exports = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin(),
new GoogleFontsWebpackPlugin({
fonts: [
{ "Open Sans": "300,700" }
]
})
]
}This will add a link tag to the HTML generated by html-webpack-plugin, and look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample App</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,700" rel="stylesheet"/>
</head>
<body>
...
</body>
</html>Options are passed to the plugin during instantiation.
new GoogleFontsWebpackPlugin({
fonts: [
{ "Open Sans": "300,700" }
]
})Type: JSON Object, mandatory
An array of JSON objects for each font you wish to include in the webpack.
Type: boolean, default: true
If true, it will use https for the googleapis URL.
Thanks to everyone who helped out with this project!
If you would like to help contribute to this project, feel free to fork it and submit pull requests to help out!
TN Labs is the brainchild of hosting company, True Negative that develops web apps, mobile apps, and more. The TN Labs community is a place where you can find information on our in-house apps, games & more, our open-source projects, as well as a collection of various development & system administration tutorials.
