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'
    ]
  }
})

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 for you for some reason, you can opt-in to the Google Font Mirror.

export default defineNuxtConfig({
  ogImage: {
    googleFontMirror: true
  }
})

This will use the fonts.font.im proxy. If you need an alternative host, you can provide a string instead.

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>