SirPole / Google Fonts Plugin
Licence: mit
Webpack plugin that downloads fonts from Google Fonts and encodes them to base64
Stars: ✭ 83
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Google Fonts Plugin
Cloudflare Workers Webpack Plugin
Launch Cloudflare Workers to the Edge from the comfort of your build step 🚀
Stars: ✭ 18 (-78.31%)
Mutual labels: webpack, webpack-plugin
Webpack Aliyun Oss
一个webpack(version >= 4)插件,上传资源到阿里云oss。可以作为webpack插件使用,也可独立使用
Stars: ✭ 36 (-56.63%)
Mutual labels: webpack, webpack-plugin
Webpack Common Shake
CommonJS Tree Shaker plugin for WebPack
Stars: ✭ 875 (+954.22%)
Mutual labels: webpack, webpack-plugin
Duplicate Package Checker Webpack Plugin
🕵️ Webpack plugin that warns you when a build contains multiple versions of the same package
Stars: ✭ 635 (+665.06%)
Mutual labels: webpack, webpack-plugin
Node Env Webpack Plugin
Simplified `NODE_ENV` handling with webpack
Stars: ✭ 51 (-38.55%)
Mutual labels: webpack, webpack-plugin
Error Overlay Webpack Plugin
Catch errors with style 💥✨
Stars: ✭ 821 (+889.16%)
Mutual labels: webpack, webpack-plugin
Webpack Alioss Plugin
阿里 oss-webpack 自动上传插件
Stars: ✭ 35 (-57.83%)
Mutual labels: webpack, webpack-plugin
Babel Minify Webpack Plugin
[DEPRECATED] Babel Minify Webpack Plugin
Stars: ✭ 502 (+504.82%)
Mutual labels: webpack, webpack-plugin
Html Inline Css Webpack Plugin
☄️ A webpack plugin for convert external stylesheet to the embedded stylesheet
Stars: ✭ 48 (-42.17%)
Mutual labels: webpack, webpack-plugin
Webpack Webextension Plugin
Webpack plugin that compiles WebExtension manifest.json files and adds smart auto reload
Stars: ✭ 47 (-43.37%)
Mutual labels: webpack, webpack-plugin
Webpack Deep Scope Analysis Plugin
A webpack plugin for deep scope analysis
Stars: ✭ 589 (+609.64%)
Mutual labels: webpack, webpack-plugin
Wcer
Webpack plugin to enable reloading while developing Chrome extensions.
Stars: ✭ 71 (-14.46%)
Mutual labels: webpack, webpack-plugin
Webpack Config Plugins
Provide best practices for webpack loader configurations
Stars: ✭ 529 (+537.35%)
Mutual labels: webpack, webpack-plugin
Prerender Spa Plugin
Prerenders static HTML in a single-page application.
Stars: ✭ 7,018 (+8355.42%)
Mutual labels: webpack, webpack-plugin
Optimize Plugin
Optimized Webpack Bundling for Everyone. Intro ⤵️
Stars: ✭ 525 (+532.53%)
Mutual labels: webpack, webpack-plugin
Event Hooks Webpack Plugin
Event hooks plugin for webpack
Stars: ✭ 30 (-63.86%)
Mutual labels: webpack, webpack-plugin
Webpack Parallel Uglify Plugin
A faster uglifyjs plugin.
Stars: ✭ 456 (+449.4%)
Mutual labels: webpack, webpack-plugin
Offline Plugin
Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
Stars: ✭ 4,444 (+5254.22%)
Mutual labels: webpack, webpack-plugin
Dotenv Webpack
A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
Stars: ✭ 1,022 (+1131.33%)
Mutual labels: webpack, webpack-plugin
Snackui
SnackUI 🍑 - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: ✭ 55 (-33.73%)
Mutual labels: webpack, webpack-plugin
Google Fonts Plugin
Webpack plugin that downloads fonts from Google Fonts and encodes them to base64.
Supports various font formats, currently eot
, ttf
, woff
and woff2
.
Exports to format specific css files, which you can serve to your clients.
Note: Current version works with Webpack 4. For webpack 3, use version 1.0.3
Install
npm install --save-dev google-fonts-plugin
Usage
webpack.config.js
const GoogleFontsPlugin = require('google-fonts-plugin')
module.exports = {
plugins: {
new GoogleFontsPlugin({
/* options */
})
}
}
webpack.config.js
const GoogleFontsPlugin = require('google-fonts-plugin')
module.exports = {
plugins: {
new GoogleFontsPlugin('path/to/config.json')
}
}
Options
Plugin supports configuration in javascript object, json file and also in your package.json.
Name | Type | Default | Description |
---|---|---|---|
fonts | Font[] |
Roboto | Defines which fonts and it's variants and subsets to download. |
formats | String[] |
woff, woff2 | Specifies which formats to download. Valid options are eot , ttf , woff and woff2 . |
encode | Boolean |
true | Whether should encode to base64. |
cache | Boolean |
true | Whether FS caching should be checked before sending requests. |
fontDisplay | String |
swap | When encode if false, this will add font-display property. Disables when empty. |
filename | String |
[name].css | Defines filename template. Valid substitutions are [name] , [hash] , [chunkhash] . |
stats | Boolean |
true | Collects basic statistics about options. You may opt out at any time by setting this to false |
Font object
Name | Type | Default | Description |
---|---|---|---|
family | String |
Roboto | Sets the font family |
variants | String[] |
400, 400i, 700, 700i | Sets the variants of the font family to download, note that not all fonts have all the possible variants |
subsets | String[] |
latin-ext | Sets the subsets, note that not all fonts are available in all subsets |
text | String |
Only downloads specific characters contained in the string provided, more information here. Ignores subsets. |
Example configuration
config.json
{
"google-fonts-plugin": {
"fonts": [
{
"family": "Roboto",
"variants": [
"400",
"400i",
"700",
"700i"
],
"subsets": [
"latin-ext"
]
}
],
"formats": [
"woff",
"woff2"
]
}
}
Note: For Google's material icons, simply set
Material Icons
as font-family
Note: From version 5.0.0, neon support is dropped to simplify the plugin itself. If you've used neon before, parse it yourself and pass the resulting object to the plugin instead. See release notes for implementation example.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].