Non-English Locales · 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)

**OG Image v6** is here! Looking for an older version?

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v6 (latest)

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

### Getting Started

-
-
-
-

### Core Concepts

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

### Overview

-
-
-
-

### Integrations

-
-
-

Core Concepts

# Non-English Locales

[Copy for LLMs](https://nuxtseo.com/docs/og-image/guides/non-english-locales.md)

To render Satori images correctly, the module provides the

.

Inter does not support non-english characters, so you will need to switch the font when rendering in different languages.

The [Noto Typeface](https://fonts.google.com/noto) from Google Fonts is a good option for this as they support a wide range of languages.

### [Example: Chinese](#example-chinese)

Use [`@nuxt/fonts`](https://fonts.nuxt.com) to load the font, then reference it in your OG image component:

components/OgImage/MyOgImage.satori.vue

```
<script setup lang="ts">
defineProps<{
  title: string
}>()
</script>

<template>
  <div style="font-family: 'Noto Sans SC', sans-serif;" class="w-full h-full flex items-center justify-center bg-white">
    <h1 class="text-6xl">
      {{ title }}
    </h1>
  </div>
</template>
```

pages/index.vue

```
<script lang="ts" setup>
defineOgImage('MyOgImage', {
  title: '中文測試中文測試中文測試中文測試中文測試中文測試中文測試中文測試',
})
</script>
```

The module will automatically detect the `Noto Sans SC` font family from your component and resolve it via `@nuxt/fonts`.

### [Using `fontSubsets` (Satori only)](#using-fontsubsets-satori-only)

When using the

 renderer, the module uses `fontless` to supplement missing font families. By default, it only downloads the `latin` subset.

If you're using characters from other languages, you may need to specify the subsets in your config:

nuxt.config.ts

```
export default defineNuxtConfig({
  ogImage: {
    fontSubsets: ['latin', 'chinese-simplified', 'devanagari']
  }
})
```

[Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/3.guides/5.non-english-locales.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/guides/non-english-locales.md)

Did this page help you?

On this page

- [Example: Chinese](#example-chinese)
- [Using fontSubsets (Satori only)](#using-fontsubsets-satori-only)

[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)