Fonts

To generate images through Satori a font is required, system fonts can't be used. To avoid issues, the module will use Inter font family (400, 700) by default.

You can customise the font by using the fonts in nuxt.config and when defining the image. You can load fonts directly from Google Fonts (recommended) or use a local font file.

For using non-english fonts you should read Non-English Locales guide for a workaround.

Loading A Google Font

Google fonts are recommended as their format will always be supported. To use Google Fonts simply provide the array of fonts you want to use using ${name}:${weight}.

This will download and cache the font when you first run your app.

export default defineNuxtConfig({
  ogImage: {
    fonts: [
      // will load the Noto Sans font from Google fonts
      'Noto+Sans:400',
      'Noto+Sans:700',
      'Work+Sans:ital:400'
    ]
  }
})

Note: Providing your own fonts will disable the default Inter font.

Google Font API Mirror

If you're in China or the Google APIs are blocked, you can provide your own proxy server that mirrors Google Fonts in TTF format.

export default defineNuxtConfig({
  ogImage: {
    // Must serve TTF fonts (not WOFF2)
    googleFontMirror: 'your-proxy-server.com'
  }
})

Important: The mirror must serve fonts in TTF or OTF format for Satori compatibility. Most public CDNs only serve WOFF2 which won't work.

Recommended for China: Instead of using a mirror, use local font files which are more reliable:

export default defineNuxtConfig({
  ogImage: {
    fonts: [
      {
        name: 'Inter',
        weight: 400,
        path: '/fonts/Inter-400.ttf',
      }
    ]
  }
})

Loading A Local Font File

Local font files must be either .otf, ttf or .woff and be within the public directory.

For example, if you have a font file at public/fonts/OPTIEinstein-Black.otf, you can load it with the config:

export default defineNuxtConfig({
  ogImage: {
    fonts: [
      {
        name: 'optieinstein',
        weight: 800,
        // path must point to a public font file
        path: '/fonts/OPTIEinstein-Black.otf',
      }
    ],
  }
})

Template Custom Fonts

Sometimes you'll be rendering a custom template that you want to use a custom font with, without having to load that font for all templates.

In this case, you can use the fonts prop on the defineOgImage component.

defineOgImage({
  fonts: [
    {
      name: 'optieinstein',
      weight: 800,
      path: '/fonts/OPTIEinstein-Black.otf',
    }
  ]
})

Using A Custom Font In Your Template

To use your custom fonts, within your template you'll need to set the font-family.

<div style="font-family: 'optieinstein'">
    <!-- ...  -->
</div>