Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    grunt-connect-fontspublic

    grunt-connect-fonts

    Grunt plugin to generate CSS files for connect-fonts compatible font packs.

    Getting Started

    This plugin requires Grunt ~1.0.0

    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:

    npm install grunt-connect-fonts --save-dev

    Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

    grunt.loadNpmTasks('grunt-connect-fonts');

    The "connect_fonts" task

    Overview

    The connect_font task generates locale specific CSS files. In your project's Gruntfile, add a section named connect_fonts to the data object passed into grunt.initConfig().

    grunt.initConfig({
      connect_fonts: {
        options: {
          // Task-specific options go here.
        },
        your_target: {
          // Target-specific options go here.
        },
      },
    });

    Options

    options.fontPacks

    Type: Array Default value: []

    Array of strings. Each value is the name of the npm module for the font-pack. Font packs must be installed via npm install before use.

    Example:

    fontPacks: [ 'connect-fonts-firasans', 'connect-fonts-opensans' ]
    

    options.fontNames

    Type: Array Default value: []

    Array of strings. Each value is the name of the font to be included.

    Example:

    fontNames: [ 'firasans-bold', 'firasans-light' ]
    

    options.languages

    Type: Array Default value: []

    Array of strings. Each value is the l10n name for the languages to generate CSS for.

    Example:

    languages: [ 'en', 'de', 'es_MX', 'es_AR' ]
    

    options.dest

    Type: String Default value: 'tmp/css'

    Where to place the CSS files.

    Example:

    dest: '.tmp/css'
    

    options.destFileName

    Type: function Default value: function (root, language) { return root + language + '.css'; }

    Function used to modify the default destination filename.

    Example:

    destFileName: function (root, language) {
      // place the CSS into the `fonts.css` file in the `language` subdirectory.
      return root + language + '/fonts.css';
    }
    

    options.userAgent

    Type: String Default value: 'all'

    User agent to generate strings for. See https://github.com/shane-tomlinson/connect-fonts for how this can be used. Usually best to leave at all.

    Usage Examples

    Write {{ locale name }}.css files to the static/css directory

    In the following example, four files are created in the static/css directory: en.css, de.css, es.css, es_MX.css. Each file contains @font-face CSS declarations for firasans-bold and firasans-regular that are tailored to that locale.

     
    grunt.initConfig({
      connect_fonts: {
        options: {
          fontPacks: [ 'connect-fonts-firasans' ],
          fontNames: [ 'firasans-bold', 'firasans-regular' ],
          languages: [ 'en', 'de', 'es', 'es_MS' ],
          dest: 'static/css'
        }
      },
    });

    The "connect_fonts_copy" task

    Overview

    The connect_font_copy task copies web fonts from an npm package to a target directory. In your project's Gruntfile, add a section named connect_fonts_copy to the data object passed into grunt.initConfig().

    grunt.initConfig({
      connect_fonts_copy: {
        options: {
          // Task-specific options go here.
        },
        your_target: {
          // Target-specific options go here.
        },
      },
    });

    Options

    options.fontPacks

    Type: Array Default value: []

    Array of strings. Each value is the name of the npm module for the font-pack. Font packs must be installed via npm install before use.

    Example:

    fontPacks: [ 'connect-fonts-firasans', 'connect-fonts-opensans' ]
    

    options.dest

    Type: String Default value: 'tmp/fonts'

    Where to place the font files.

    Example:

    dest: 'static/fonts'
    

    Usage Examples

    Copy web fonts to the static/fonts directory

    In the following example, the web fonts available in the connect-fonts-firasans font pack are copied to the static/fonts directory.

     
    grunt.initConfig({
      connect_fonts_copy: {
        options: {
          fontPacks: [ 'connect-fonts-firasans' ],
          dest: 'static/fonts'
        }
      },
    });

    Contributing

    In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

    Author:

    Get involved:

    Documentation, new features, MOAR FONTS!

    License:

    This software is available under version 2.0 of the MPL:

    https://www.mozilla.org/MPL/

    Keywords

    install

    npm i grunt-connect-fonts

    Downloadsweekly downloads

    18

    version

    0.0.10

    license

    MPL-2.0

    repository

    githubgithub

    last publish

    collaborators

    • avatar
    • avatar