Have ideas to improve npm?Join in the discussion! »

    @northxsouth/google-fonts

    0.0.7 • Public • Published

    gatsby-plugin-google-fonts-v2

    A simple Gatsby plugin that loads google fonts using the new v2 API. It also supports importing variable size fonts.

    Install

    yarn add gatsby-plugin-google-fonts-v2
    // or
    npm install gatsby-plugin-google-fonts-v2

    Add to Gatsby Config

    In gatbsy-config.js

    plugins: [
      {
        resolve: `gatsby-plugin-google-fonts-v2`,
        options: {
          fonts: [
            {
              family: 'Roboto Slab',
              variable: true,
              weights: ['200..900']
            }
          ]
        }
      }
      // other plugins
    ];

    Options

    Plugin options:

    • verbose (optional)
      • enables the error reporting in case any malformed options are passed to the font
    • legacy (optional)
      • it uses the v1 api. CAUTION: this will disable variable font and will error out if both are used at the same time.
      • not fully implemented yet
    • display (optional)
      • enables font-display option. Details here
      • defaults to display=swap

    Font options:

    • family (required)
      • the font family you would like to use as it appears in Google Fonts - it will be formatted by capitalising the first letter of every word and replacing space with "+"
    • strictName (optional)
      • if used, the font family name will be used as the user typed it. Useful for some fonts that have ALL CAPS names
    • variable (optional)
      • if used, it signals that the font is a variable width font and will revert to using the (min_weight..max_weight) format for the font weight - if not present, the font will be treated as a regular font and will require the regular font weight format
    • weights: (optional)
      • if not used, the font will load with the default weight selected

    Weights formats

    • Regular font

      • ['300']- will load the 300 weight
      • ['300', '900'] - will load the 300 and 900 weights
    • Variable font

      • ['200..500'] - will load the non-italic version with all weights between 200 and 500
      • ['200..500', [300..400] - will load the non-italic version with all weights between 200 and 500 AND italic version with weights between 300 and 400
      • ['', '200..500'] - will load just the italic version with all weights between 200 and 500
      • NB: Will only work with variable: true

    Have fun. PR's are welcomed.

    PS. Excuse the readme formatting. Markdown is not my friend.

    Install

    npm i @northxsouth/google-fonts

    DownloadsWeekly Downloads

    0

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    22.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar
    • avatar