---
title: "Fonts · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/v5/guides/custom-fonts"
last_updated: "2026-08-16T10:00:30.231Z"
meta:
  description: "Using custom fonts in your OG Images."
  "og:description": "Using custom fonts in your OG Images."
  "og:title": "Fonts · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

You're viewing **OG Image v5** documentation. For the latest, [~~switch to v6~~](https://nuxtseo.com/docs/og-image/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/v5/api/define-og-image)

](https://nuxtseo.com/docs/og-image/v5/releases/v5)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Core Concepts**

# **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~~**](https://nuxtseo.com/docs/og-image/guides/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.

```ts
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**.

```ts
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:

```ts
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:

```ts
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.

```ts
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.

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

**Was this page helpful?**

[**JPEGs** Learn how to generate JPEG images instead of PNG for Nuxt OG Image.](https://nuxtseo.com/docs/og-image/v5/guides/jpegs) [**Non-English Locales** How to use the Nuxt OG Image module with non-english locales.](https://nuxtseo.com/docs/og-image/v5/guides/non-english-locales)