Fonts · Nuxt OG Image · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

You're viewing **OG Image v5** documentation. For the latest,

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v5

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

-
-
-
-

### Core Concepts

-
-
-
-
-
-
-
-
-
-
-
-
-
-

### Integrations

-
-

Core Concepts

# Fonts

[Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/guides/custom-fonts.md)

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

 guide for a workaround.

## [Loading A Google Font](#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](#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](#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](#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](#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>
```

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/3.guides/5.custom-fonts.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/guides/custom-fonts.md)

Did this page help you?

On this page

- [Loading A Google Font](#loading-a-google-font)
- [Loading A Local Font File](#loading-a-local-font-file)
- [Template Custom Fonts](#template-custom-fonts)
- [Using A Custom Font In Your Template](#using-a-custom-font-in-your-template)

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)