Nitrogen Poisonous Monoxide

    @epicdesignlabs/gatsby-plugin-google-fonts

    1.0.1 • Public • Published

    @epic-design-labs/gatsby-plugin-google-fonts

    Revised Gatsby plugin that loads Google Fonts to your custom Gatsby sites. It supports importing variable size fonts.

    Commitizen friendly

    Install

    # With NPM
    $ npm install @epic-design-labs/gatsby-plugin-google-fonts
    
    # With Yarn
    $ yarn add @epic-design-labs/gatsby-plugin-google-fonts

    Add to Gatsby Config

    In gatbsy-config.js

    plugins: [
    	{
    		resolve: `@epic-design-labs/gatsby-plugin-google-fonts`,
    		options: {
    			fonts: [
    				{
    					family: "JetBrains Mono",
    					weights: ["100", "400"]
    				},
    				{
    					family: "Roboto Mono",
    					weights: ["100..400"]
    				}
    			]
    		}
    	}
    	// other plugins
    ];

    Options

    Plugin options

    Option Description
    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

    Option Description
    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

    Option Description
    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
    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

    Work in Progress

    • [ ] Full backwards compatibility support for v1 Google Fonts API

    Author

    Epic Design Labs

    License

    Released under the MIT license.

    Credits

    Thanks to all the contributors and maintainers of both the original plugin gatsby-plugin-google-fonts and its v2 version, gatsby-plugin-google-fonts-v2 for the great work. 🎉

    Install

    npm i @epicdesignlabs/gatsby-plugin-google-fonts

    DownloadsWeekly Downloads

    26

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    294 kB

    Total Files

    24

    Last publish

    Collaborators

    • maxjerry
    • kalwiggins
    • guyromellemagayano