MCPcopy Index your code
hub / github.com/SirPole/google-fonts-plugin

github.com/SirPole/google-fonts-plugin @v5.0.2

Chat with this repo
repository ↗ · DeepWiki ↗ · release v5.0.2 ↗ · + Follow
28 symbols 57 edges 19 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

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.

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.

Extension points exported contracts — how you extend this code

DefaultOptions (Interface)
(no doc) [1 implementers]
src/Options/DefaultOptions.ts
ChunkHash (Interface)
(no doc)
src/types/webpack.d.ts
Font (Interface)
(no doc)
src/Options/Font.ts
Compilation (Interface)
(no doc)
src/types/webpack.d.ts
Compiler (Interface)
(no doc)
src/types/webpack.d.ts

Core symbols most depended-on inside this repo

createCompilation
called by 12
src/types/webpack.d.ts
emitAssets
called by 3
src/types/webpack.d.ts
digest
called by 2
src/types/webpack.d.ts
addChunk
called by 1
src/types/webpack.d.ts
getAgent
called by 1
src/Options/Options.ts
constructor
called by 0
src/Fonts/Fonts.ts
constructor
called by 0
src/Plugin/Plugin.ts
constructor
called by 0
src/Options/Options.ts

Shape

Class 12
Method 10
Interface 5
Enum 1

Languages

TypeScript100%

Modules by API surface

src/types/webpack.d.ts7 symbols
src/Options/Options.ts4 symbols
src/Stats/Stats.ts3 symbols
src/Plugin/Plugin.ts3 symbols
src/Fonts/Fonts.ts3 symbols
src/Chunk/Chunk.ts3 symbols
src/Cache/Cache.ts2 symbols
src/Options/FontDisplay.ts1 symbols
src/Options/Font.ts1 symbols
src/Options/DefaultOptions.ts1 symbols

For agents

$ claude mcp add google-fonts-plugin \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact

Ask about this repo answers extend the page