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>