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. By default, we expect the font file to be the 400 weight, normal style, and latin subset. To indicate different weights and styles, please include that information in the filename. For example comic-sans-ms.woff2 (400/normal/latin; defaults), comic-sans-ms-700-italic-cyrillic.woff2 (700/italic/cyrillic). Keywords like light, bold, or black are accepted in place of a weight number: comic-sans-ms-bold.woff2. font-family values with spaces and/or caps will lookup hyphenated lowercase filenames as well, eg font-family: 'Comic Sans MS' will look for comic-sans-ms.woff2 as well as Comic\ Sans\ MS.woff2 on disk.

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 */
      }
    }
  })
})