nuxt-fonts

nuxt-fonts

Fonts module for Nuxt

📖 Release Notes

Setup

• Add nuxt-fonts dependency to your project

With pnpm

pnpm add nuxt-fonts

Or, with yarn

yarn add nuxt-fonts

Or, with npm

npm install nuxt-fonts

• Add nuxt-fonts to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    // Simple usage
    "nuxt-fonts",

    // With options
    [
      "nuxt-fonts",
      {
        /* module options */
      },
    ],
  ],
});

Using top level options

export default defineNuxtConfig({
  modules: ["nuxt-fonts"],
  fonts: {
    /* module options */
  },
});

Options

inline

• Type: Boolean
• Default: nuxt.options.ssr

provider

• Type: google|local|bunny
• Default: 'google'

families

• Type: Array

export default {
  fonts: {
    families: [
      name: string
      as?: string
      provider?: Providers
      subsets?: string | string[]
      display?: FontDisplay
      normal?: number | number[] | string | string[]
      italic?: number | number[] | string | string[]
      fallbacks?: string[]
      text?: string
    ]
  }
}

fallbacks

• Type: String[]
• Default: ['BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans']

Contributing

You can contribute to this module online with CodeSandBox:

Or locally:

• Clone this repository
• Install dependencies using pnpm install
• Prepare development server using pnpm dev:prepare
• Build module using pnpm build
• Launch playground using pnpm dev

License

MIT License

Copyright (c) Nuxt