Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including google-fonts-plugin with all npm packages installed. Try it out:

var googleFontsPlugin = require("google-fonts-plugin")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

google-fonts-plugin v5.0.2

Webpack plugin that downloads fonts from Google Fonts and encodes them to base64.

Google Fonts Plugin

GitHub license npm CircleCI Codecov

Buy Me A Coffee

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.

NameTypeDefaultDescription
fontsFont[]RobotoDefines which fonts and it's variants and subsets to download.
formatsString[]woff, woff2Specifies which formats to download. Valid options are eot, ttf, woff and woff2.
encodeBooleantrueWhether should encode to base64.
cacheBooleantrueWhether FS caching should be checked before sending requests.
fontDisplayStringswapWhen encode if false, this will add font-display property. Disables when empty.
filenameString[name].cssDefines filename template. Valid substitutions are [name], [hash], [chunkhash].
statsBooleantrueCollects basic statistics about options. You may opt out at any time by setting this to false
Font object
NameTypeDefaultDescription
familyStringRobotoSets the font family
variantsString[]400, 400i, 700, 700iSets the variants of the font family to download, note that not all fonts have all the possible variants
subsetsString[]latin-extSets the subsets, note that not all fonts are available in all subsets
textStringOnly 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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free