grunt-google-fonts
Download Google Fonts in Grunt jobs
Getting Started
This plugin requires Grunt >=0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
yarn add -D grunt-google-fonts
or
npm install grunt-google-fonts --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-google-fonts');
The "googlefonts" task
Options
options.fontPath
Type: String
Default value: ./
Specify directory to store fonts.
options.cssFile
Type: String
Boolean
Default value: false
Path to store the generated css file.
options.cssFileLegacy
Type: String
Boolean
Default value: false
Path to store the generated legacy (non woff2) css file.
options.httpPath
Type: String
Boolean
Default value: false
Override http path in css file. This helps if you are hosting fonts from the CDN domain (eg. value https://my-super-fast.cdn/fonts/
will set the font path as https://my-super-fast.cdn/fonts/open-sans-300.woff
). On false this will fallback to fontPath
.
options.formats
Type: Object
Default value: { eot: false, ttf: false, woff: false, woff2: true, svg: false }
Set formats to download. Defaults to woff2 that covers all modern browsers. For more information about format support, see caniuse entries for EOT, TTF, WOFF, WOFF2 and SVG.
options.fonts
Type: Array
Default value: []
Fonts to download. This is an array of objects with font specific config.
font.family
Type: String
Font name.
font.styles
Type: Array
Array of font styles. Eg. [300]
or [300, 400, '400italic']
.
font.subsets
Type: Array
Array of font subsets. Eg. ['latin', 'cyrillic']
. This option is ommitted on woff2 fonts.
font.text
Type: String
Restrict font to specified letters to make it smaller.
Usage Examples
Basic Options
This example includes all the functionality needed for basic use.
grunt.initConfig({
googlefonts: {
build: {
options: {
fontPath: 'fonts/',
cssFile: 'fonts/fonts.css',
fonts: [
{
family: 'Open Sans',
styles: [
400, 700
]
}
]
}
}
}
});
Custom Options
If you need more browser and charset support, this example is for you.
grunt.initConfig({
googlefonts: {
build: {
options: {
fontPath: 'fonts/',
cssFile: 'fonts/fonts.css',
formats: {
eot: true,
woff: true,
svg: true
},
fonts: [
{
family: 'Open Sans',
subsets: [
'latin',
'cyrillic'
],
styles: [
300, 400, 700
]
},
{
family: 'Droid Sans',
styles: [
400, 700
]
},
{
family: 'Lato',
text: 'My logo',
styles: [
400
]
}
]
}
}
}
});