Custom Fonts and Emoji Support

One of the key features of astro-assets-generation is first-class support for custom fonts and emoji rendering.

Loading Custom Fonts

Register fonts in your configure() call:

configure({
  customFonts: [
    { name: "Geist", url: "/fonts/Geist.ttf", weight: 400, style: "normal" },
    {
      name: "Geist",
      url: "/fonts/Geist-Bold.ttf",
      weight: 700,
      style: "normal",
    },
    {
      name: "GravitasOne",
      url: "/fonts/GravitasOne-Regular.ttf",
      weight: 400,
      style: "normal",
    },
  ],
});

Then use them via FontWrapper:

<FontWrapper fontFamily="GravitasOne">
  <h1 style={{ color: "white", fontSize: 96 }}>Bold Headline</h1>
</FontWrapper>

Emoji Support

Emojis are detected and rendered automatically inside any text node. Just write them inline:

return (
  <h1>Hello 👋 World 🌍</h1>
);

Behind the scenes, Takumi pulls high-quality SVGs from the Twemoji CDN and inlines them at render time.

Unicode Support

The library supports multi-language text out of the box. Arabic, Japanese, Thai, Korean, Greek — just make sure the font you load covers the characters you need.