Non-English Locales

To render Satori images correctly, the module provides the default font Inter.

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

The Noto Typeface from Google Fonts is a good option for this as they support a wide range of languages.

Example: Chinese

Use @nuxt/fonts to load the font, then reference it in your OG image component:

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

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

When using the Satori 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:

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