Custom fonts

Upload a brand font once, use it in any template, and bake it into each version.

Renduo renders with the network blocked, so a template can never fetch a font at render time. Custom fonts are instead uploaded to your organization's asset registry and baked into the version's shell as a data URI. This guide covers the full flow.

1. Upload the font

renduo assets push ./acme-sans.woff2 --name acme-sans

Name:  acme-sans
Type:  font (font/woff2)
Size:  88.3 KB

Use it in your component:  font-family: 'acme-sans';
And declare it on push:   renduo push MyComponent.tsx --assets acme-sans

Accepted font formats: woff2, woff, ttf, otf. The asset name is what you'll write as font-family in your component, so keep it a simple slug.

2. Use the font in your component

The font-family is the asset name, literally:

const props = JSON.parse(window.__RENDUO_PROPS__)

export default function Invoice() {
  return (
    <div style={{ fontFamily: 'acme-sans' }}>
      <h1>{props.title}</h1>
      {/* … */}
    </div>
  )
}

No CSS import, no @font-face — Renduo generates the @font-face from the asset at bake time. Only fonts the template declares get baked in.

3. Declare the asset and push

renduo push Invoice.tsx --slug invoice --assets acme-sans

The push resolves the declared asset, inlines it into the version's shell, and registers the version. If you forget --assets (or the font doesn't exist), the push fails with a clear ASSET_NOT_FOUND error — never a broken render.

4. Regenerate — and change fonts safely

You can mix and match fonts across templates (assets are org-wide) and update a font without touching your code:

renduo assets push ./acme-sans-v2.woff2 --name acme-sans   # replace in place
renduo push Invoice.tsx --slug invoice --assets acme-sans  # new version, new bytes

What to expect (immutability)

Re-uploading acme-sans does not change templates you already published. Old versions keep rendering with the old bytes — byte-for-byte identical. To use the new font, publish a new version of the template (same slug).
Deleting acme-sans does not break anything published. It only stops you from declaring it in future versions.

This is deliberate — see asset immutability.

Storage limits

Fonts count against your plan's asset storage: Free 10 MB (max 5 assets), Starter 100 MB, Growth 500 MB. Check usage:

renduo assets list

  acme-sans              font   88.3 KB  (2 days ago)
  company-logo           image  24.0 KB  (2 days ago)
Storage: 112.3 KB of 10 MB · 2 of 5 assets

Tips

Prefer woff2. It's dramatically smaller than ttf/otf; a subsetted woff2 weighs a fraction of a full ttf. Each version's shell (bundle + baked assets) is capped at 8 MB — a few heavy ttf files can blow that.
The same --name replaces the asset for future versions — you don't need to create acme-sans-v2 as a separate asset unless you want to keep both.