Fonts

SealKit renders text on a canvas, so the target font must be loaded before the seal is drawn.

Default Font

The default font is Noto Serif JP. It is loaded from Google Fonts automatically when referenced.

<SealCanvas preset="mitomein" text="山田太郎" />

Google Fonts Map

The package exports a map of recommended Japanese Google Fonts:

import { GOOGLE_FONT_MAP } from '@luohuax/seal-kit'

console.log(GOOGLE_FONT_MAP)
// { "Noto Serif JP": "Noto Serif JP", "Shippori Mincho": "Shippori Mincho", ... }

Use the value as the fontFamily prop:

<SealCanvas
  preset="mitomein"
  text="山田太郎"
  fontFamily="Shippori Mincho"
/>

Registering a Custom Font

For local or third-party fonts, register them first:

import { registerFont, loadFont } from '@luohuax/seal-kit'

registerFont({
  family: '装甲明朝',
  src: '/fonts/soukoumin.woff2',
  format: 'woff2'
})

await loadFont('装甲明朝')

Then use it:

<SealCanvas preset="mitomein" text="山田太郎" fontFamily="装甲明朝" />

Registering a Google Font Explicitly

import { registerFont, loadFont } from '@luohuax/seal-kit'

registerFont({
  family: 'Sawarabi Mincho',
  google: true
})

await loadFont('Sawarabi Mincho')

Font Loading State

Always ensure the font is ready before exporting a high-resolution image. The safest pattern is to await loadFont() in a useEffect before showing the export button.