Wondering what’s next for npm?Check out our public roadmap! »

    @nuxtjs/google-fonts

    1.3.0 • Public • Published

    @nuxtjs/google-fonts

    @nuxtjs/google-fonts

    npm version npm downloads Github Actions CI Codecov License

    Google Fonts module for NuxtJS

    Features

    📖  Read more

    Setup

    1. Add @nuxtjs/google-fonts dependency to your project
    yarn add --dev @nuxtjs/google-fonts # or npm install --save-dev @nuxtjs/google-fonts
    1. Add @nuxtjs/google-fonts to the buildModules section of nuxt.config.js
    {
      buildModules: [
        // Simple usage
        '@nuxtjs/google-fonts',
    
        // With options
        ['@nuxtjs/google-fonts', { /* module options */ }]
      ]
    }

    ⚠️ If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

    Using top level options

    export default {
      buildModules: [
        '@nuxtjs/google-fonts'
      ],
      googleFonts: {
        /* module options */
      }
    }

    Options

    See module options.

    families

    • Type: Object
    • Default: {}
    {
      families: {
        Roboto: true,
        'Josefin+Sans': true,
        Lato: [100, 300],
        Raleway: {
          wght: [100, 400],
          ital: [100]
        },
      }
    }

    See https://developers.google.com/fonts/docs/css2#quickstart_guides

    display

    • Type: String
    • Default: null

    The font-display property lets you control what happens while the font is still loading or otherwise unavailable.

    {
      display: 'swap' // 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
    }

    See https://developers.google.com/fonts/docs/css2#use_font-display

    subsets

    • Type: Array[String]|String
    • Default: []

    Some of the fonts in the Google Font Directory support multiple scripts (like Latin, Cyrillic, and Greek for example). In order to specify which subsets should be downloaded the subset parameter should be appended to the URL.

    See https://developers.google.com/fonts/docs/getting_started#specifying_script_subsets

    prefetch

    • Type: Boolean
    • Default: true

    This option inject <link rel =" dns-prefetch "href =" https://fonts.gstatic.com/ "/> into your project header.

    See https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch

    preconnect

    • Type: Boolean
    • Default: true

    This option inject <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /> into your project header.

    See https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch#Best_practices

    preload

    • Type: Boolean
    • Default: true

    This option inject <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto" /> into your project header, optionally increase loading priority.

    See https://developer.mozilla.org/pt-BR/docs/Web/HTML/Preloading_content

    useStylesheet

    • Type: Boolean
    • Default: false

    This option inject <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto" /> into your project header, recommended for projects that use the AMP module that removes scripts.

    download

    See downloading Google Fonts

    • Type: Boolean
    • Default: false

    This option you can download css and google sources for your local project. This means that your project will not depend on these external resources.

    Note: The options below are only used when this option is enabled.

    base64

    • Type: Boolean
    • Default: false

    This option encode the fonts and inject directly into the generated css file.

    inject

    • Type: Boolean
    • Default: true

    This option inject the globally generated css file.

    See https://nuxtjs.org/api/configuration-css/

    overwriting

    • Type: Boolean
    • Default: false

    This option prevents files from being downloaded more than once.

    outputDir

    • Type: String
    • Default: this.options.dir.assets

    Specifies the output directory for downloaded files.

    stylePath

    • Type: String
    • Default: 'css/fonts.css'

    Specifies the path of the css file to be generated.

    fontsDir

    • Type: String
    • Default: 'fonts'

    Specifies the directory where the fonts will be downloaded.

    Note: This option is used if the base64 option is disabled.

    fontsPath

    • Type: String
    • Default: '~assets/fonts'

    Specifies the path of the fonts within the generated css file.

    Note: This option is used if the base64 option is disabled.

    Development

    1. Clone this repository
    2. Install dependencies using yarn install or npm install
    3. Start development server using npm run dev

    License

    MIT License

    Copyright (c) Nuxt Community

    Keywords

    none

    Install

    npm i @nuxtjs/google-fonts

    DownloadsWeekly Downloads

    8,388

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    16.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar