grunt-google-fonts

    0.5.0 • Public • Published

    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
                ]
              }
            ]
          }
        }
      }
    });

    Install

    npm i grunt-google-fonts

    DownloadsWeekly Downloads

    263

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • aiken