nuxt-fonts

Fonts module for Nuxt

📖 Release Notes

Setup

1. 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

2. 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:

1. Clone this repository
2. Install dependencies using pnpm install
3. Prepare development server using pnpm dev:prepare
4. Build module using pnpm build
5. Launch playground using pnpm dev

License

MIT License

Copyright (c) Nuxt