Giter Club home page Giter Club logo

google-fonts-webpack-plugin's Introduction

Google Fonts Webpack Plugin

Download Google fonts to webpack build folder using google-webfonts-helper or use CDN to integrate with html-webpack-plugin.


Install

npm install google-fonts-webpack-plugin

Usage

/webpack.config.js

const GoogleFontsPlugin = require("google-fonts-webpack-plugin")

module.exports = {
	"entry": "index.js",
	/* ... */
	plugins: [
		new GoogleFontsPlugin({
			fonts: [
				{ family: "Source Sans Pro" },
				{ family: "Roboto", variants: [ "400", "700italic" ] }
			]
			/* ...options */
		})
	]
}

Options

new GoogleFontsPlugin(options: Object)
Name Type Default Description
fonts FontObject[] - Configuration generated by http://fontello.com.
name String "fonts" Module name.
filename String "fonts.css" Css file name.
path String "font/" Relative path to fonts directory. If path is undefined fonts are not downloaded, the css file is generated with Google hosted font files.
local Boolean true Wether to use google-webfonts-helper API or just link to Google Fonts hosted css. If this option is set to false this plugin just adds the css url to html-webpack-plugin (if present).
formats Array [ "eot", "woff", "woff2", "ttf", "svg" ] Font formats to download.
apiUrl String "https://google-webfonts-helper.herokuapp.com/api/fonts" google-webfonts-helper API url.

FontObject

Name Type Default Description
family String - Font family.
variants Array - Font variants according to google-webfonts-helper (e.g.: [ "italic", "500", "700italic" ]).
subsets Array - Font subsets according to google-webfonts-helper (e.g.: [ "latin", "greek" ]).
formats Array - Font formats to download. Defaults to options.formats.

google-fonts-webpack-plugin's People

Contributors

chapa avatar debanjanbasu avatar jgreubel avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.