{"id":20070,"library":"google-fonts-webpack-plugin","title":"Google Fonts Webpack Plugin","description":"A webpack plugin that downloads Google Fonts to your build folder using google-webfonts-helper or links to the Google Fonts CDN. Version 0.4.4 is the latest stable release; activity is sporadic with no recent updates. Key differentiators: seamless integration with webpack and html-webpack-plugin, support for multiple font formats (eot, woff, woff2, ttf, svg), and optional local hosting versus CDN linking.","status":"maintenance","version":"0.4.4","language":"javascript","source_language":"en","source_url":"https://github.com/gabiseabra/google-fonts-webpack-plugin","tags":["javascript","google","fonts","webfonts","webpack","plugin"],"install":[{"cmd":"npm install google-fonts-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add google-fonts-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add google-fonts-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin requires webpack >=2.2.0 to function.","package":"webpack","optional":false}],"imports":[{"note":"This package does not ship ESM; use CommonJS require(). ECMAScript modules are not supported.","wrong":"import GoogleFontsPlugin from 'google-fonts-webpack-plugin'","symbol":"GoogleFontsPlugin","correct":"const GoogleFontsPlugin = require('google-fonts-webpack-plugin')"},{"note":"For TypeScript with esModuleInterop, use import = require() syntax.","wrong":"","symbol":"GoogleFontsPlugin","correct":"import GoogleFontsPlugin = require('google-fonts-webpack-plugin')"},{"note":"The constructor expects an options object, not an array. Pass fonts as an array inside the options object.","wrong":"new GoogleFontsPlugin([{ family: \"Roboto\" }])","symbol":"options","correct":"new GoogleFontsPlugin({ fonts: [] })"}],"quickstart":{"code":"// webpack.config.js\nconst GoogleFontsPlugin = require('google-fonts-webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js'\n  },\n  plugins: [\n    new GoogleFontsPlugin({\n      fonts: [\n        { family: 'Roboto', variants: ['400', '700'] },\n        { family: 'Open Sans', variants: ['300', '600italic'] }\n      ],\n      path: 'font/',            // relative to output path\n      filename: 'fonts.css',\n      formats: ['woff2', 'woff'],\n      local: true               // download fonts locally\n    })\n  ]\n};","lang":"javascript","description":"Demonstrates basic configuration: specifying font families with variants, setting local download with woff2/woff formats, and custom output path and CSS filename."},"warnings":[{"fix":"Migrate to a maintained alternative like @next/font (Next.js) or fontsource packages.","message":"This package is no longer actively maintained; consider using @next/font or a more modern solution.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Set local: true in the options object if you want fonts bundled locally.","message":"The 'local' option must be set to true for fonts to be downloaded; otherwise, only a CSS link is generated.","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"Install html-webpack-plugin or set local: true to avoid dependency on it.","message":"If html-webpack-plugin is not installed, setting local to false will throw an error because it tries to inject a link into the HTML template.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"If the API is down, consider using a self-hosted instance or switch to local: false and use CDN.","message":"The google-webfonts-helper API (default apiUrl) may be unreliable or slow; it's a Heroku app that can be down.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Verify variant strings against the Google Fonts API or google-webfonts-helper.","message":"Font variants must match the exact format returned by google-webfonts-helper (e.g., '400', '700italic'); invalid variants cause silent failures.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install google-webfonts-helper' as a dependency.","cause":"The package does not automatically install peer dependencies; missing google-webfonts-helper.","error":"Error: Cannot find module 'google-webfonts-helper'"},{"fix":"Use 'const GoogleFontsPlugin = require('google-fonts-webpack-plugin');'","cause":"CommonJS require() was used incorrectly or the import was attempted as default import in ESM.","error":"TypeError: GoogleFontsPlugin is not a constructor"},{"fix":"Ensure the plugin is instantiated with an options object containing a 'fonts' array.","cause":"The options object is empty or malformed (e.g., missing fonts array).","error":"ERROR in Plugin could not be instantiated"},{"fix":"Either set local: true or install and configure html-webpack-plugin.","cause":"local is false but html-webpack-plugin is not properly configured.","error":"HTML Webpack Plugin Error: No template provided"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}