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.

googleicons

Google Fonts Icons adds support for Material Symbols and Material Icons.

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 core of the provider API in Nuxt Fonts has been extracted to a common library that can be used by any framework - unifont.

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

import { defineFontProvider } from 'unifont'

export default defineFontProvider('some-custom-provider', async (options) => {
  // do some setup
  return {
    async resolveFont (fontFamily, options) {
      if (fontFamily === 'My Font Family') {
        return {
          fonts: [
            {
              src: [
                { url: 'https://cdn.org/my-font.woff2', format: 'woff2' },
              ],
              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 => {
  delete providers.adobe

  providers['custom-provider'] = defineFontProvider('custom-provider', async () => {
    /** some setup */
    return {
      async resolveFont (fontFamily, options) {
        /** resolve font faces */
      }
    }
  })
})