Skip to content
hono-email

Font

View as Markdown

<Font> renders @font-face and a fallback font-family declaration inside <Head>.

Example

Section titled “Example”
import { Font, Head, Html, render } from 'hono-email'


const { html } = await render(
  <Html>
    <Head>
      <Font
        fallbackFontFamily={['Arial', 'sans-serif']}
        fontFamily="Inter"
        fontWeight={400}
        webFont={{
          url: 'https://example.com/inter.woff2',
          format: 'woff2',
        }}
      />
    </Head>
  </Html>,
)

Why provide a fallback

Section titled “Why provide a fallback”

Many email clients ignore @font-face and web fonts entirely. Providing a stack of fallback fonts ensures your email remains readable even when the custom font does not load. You can check client support at Can I email… @font-face.