Providers

Built-In Providers

Nuxt Fonts ships with a number of built-in providers.

local

The local provider deeply scans your public/ directories (including of your layers) for font files (supporting ttf, woff, woff2, eot or otf extensions).

Then, when you use a font-family in your CSS, we check to see whether it matches one of these files. We also expect font weight, font style and subset to be in the file name, unless they are 'default' values (400 weight, normal style and latin subset).

google

Google Fonts is one of the best known public font APIs.

bunny

Bunny Fonts is provided by bunny.net and is a drop-in Google Fonts compatible API, focusing on privacy.

fontshare

Fontshare is a free font service with 100+ professional-grade fonts from the Indian Type Foundry (ITF).

fontsource

Fontsource is a collection of open-source fonts that are designed for self-hosting in web applications.

adobe

Adobe Fonts is a font service for both personal and commercial use included with Creative Cloud subscriptions.

To configure the Adobe provider in your Nuxt app, you must provide a Project ID or array of Project IDs corresponding to the Web Projects you have created in Adobe Fonts.

export default defineNuxtConfig({
  modules: ['@nuxt/fonts'],
  fonts: {
    adobe: {
      id: ['<some-id>', '<another-kit-id>'],
    },
  }
})

Custom Providers

The provider API is likely to evolve in the next few releases of Nuxt Fonts, but at the moment it looks like this:

import { defineFontProvider } from '@nuxt/fonts/utils'

export default defineFontProvider({
  async setup () {
    // do some setup
  },
  async resolveFontFaces (fontFamily, defaults) {
    if (fontFamily === 'My Font Family') {
      return {
        fonts: [
          {
            src: [
              { url: 'https://cdn.org/my-font.woff2', format: 'woff2' },
              // this will be inferred as a `woff` format file
              'https://cdn.org/my-font.woff',
            ],
            weight: 400,
            style: 'normal',
          }
        ]
      }
    }
  }
})

Module authors can also add their own providers (or remove existing ones) in the fonts:providers hook which is called by Nuxt Fonts after all modules have run.

nuxt.hook('fonts:providers', providers => {
  providers.push({
    async setup () {
      /** some setup */
    },
    async resolveFontFaces (fontFamily, defaults) {
      /** resolve font faces */
    }
  })
})