You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**Important:** The mirror must serve fonts in TTF or OTF format for Satori compatibility. Most public CDNs only serve WOFF2 which won't work.
28
+
::note
29
+
The `global: true` option is **required** for fonts to be available in OG Image rendering.
30
+
::
51
31
52
-
**Recommended for China:** Instead of using a mirror, use local font files which are more reliable:
32
+
See the [@nuxt/fonts integration guide](/docs/og-image/integrations/fonts) for full documentation.
53
33
54
-
```ts
55
-
exportdefaultdefineNuxtConfig({
56
-
ogImage: {
57
-
fonts: [
58
-
{
59
-
name: 'Inter',
60
-
weight: 400,
61
-
path: '/fonts/Inter-400.ttf',
62
-
}
63
-
]
64
-
}
65
-
})
66
-
```
67
-
68
-
## Loading A Local Font File
69
-
70
-
Local font files must be either `.otf`, `ttf` or `.woff` and be within the `public` directory.
34
+
## Using Custom Fonts in Templates
71
35
72
-
For example, if you have a font file at `public/fonts/OPTIEinstein-Black.otf`, you can load it with the config:
36
+
To use your custom fonts within a template, set the `font-family` style:
73
37
74
-
```ts [nuxt.config.ts]
75
-
exportdefaultdefineNuxtConfig({
76
-
ogImage: {
77
-
fonts: [
78
-
{
79
-
name: 'optieinstein',
80
-
weight: 800,
81
-
// path must point to a public font file
82
-
path: '/fonts/OPTIEinstein-Black.otf',
83
-
}
84
-
],
85
-
}
86
-
})
38
+
```vue [components/OgImage/MyTemplate.vue]
39
+
<template>
40
+
<div style="font-family: 'Roboto'">
41
+
<h1>{{ title }}</h1>
42
+
</div>
43
+
</template>
87
44
```
88
45
89
-
## Template Custom Fonts
46
+
## Non-English Fonts
90
47
91
-
Sometimes you'll be rendering a custom template that you want to use a custom font with, without
92
-
having to load that font for all templates.
48
+
For using non-English fonts, read the [Non-English Locales](/docs/og-image/guides/non-english-locales) guide.
93
49
94
-
In this case, you can use the `fonts` prop on the `defineOgImage` component.
50
+
## Font Format
95
51
96
-
```ts
97
-
defineOgImage({
98
-
fonts: [
99
-
{
100
-
name: 'optieinstein',
101
-
weight: 800,
102
-
path: '/fonts/OPTIEinstein-Black.otf',
103
-
}
104
-
]
105
-
})
106
-
```
52
+
Different renderers support different font formats. See the [font format compatibility table](/docs/og-image/integrations/fonts#font-format) for details.
107
53
108
-
## Using A Custom Font In Your Template
54
+
## No @nuxt/fonts Installed
109
55
110
-
To use your custom fonts, within your template you'll need to set the font-family.
111
-
112
-
```html
113
-
<divstyle="font-family: 'optieinstein'">
114
-
<!-- ... -->
115
-
</div>
116
-
```
56
+
If `@nuxt/fonts` is not installed, no fonts will be available for OG image rendering. Install the module to use custom fonts.
Fonts families to use when generating images with Satori. When not using Inter it will automatically fetch the font from Google Fonts.
37
-
38
-
See the [Custom Fonts](/docs/og-image/guides/custom-fonts) documentation for more details.
39
-
40
31
### `zeroConfig`
41
32
42
33
- Type: `boolean`{lang="ts"}
43
34
- Default: `false`
44
35
45
36
Enable zero runtime mode. See the [Zero Runtime](/docs/og-image/guides/zero-runtime) documentation for more details.
46
37
47
-
### `googleFontMirror`
48
-
49
-
- Type: `string`{lang="ts"}
50
-
- Default: `undefined`
51
-
52
-
Specify a custom Google Fonts mirror host (e.g., your own proxy server that serves TTF fonts).
53
-
54
-
**Note:** The mirror must serve TTF format fonts for Satori compatibility. Most public CDNs (bunny.net, fontsource, etc.) only serve WOFF2 which is not compatible.
55
-
56
-
**For China users:** We recommend using local font files via the `fonts` option with `path` instead of relying on mirrors. See the [Custom Fonts](/docs/og-image/guides/custom-fonts#loading-a-local-font-file) guide.
0 commit comments