Klippy

Fonts

Klippy supports web fonts in preview and ensures font availability for export. The app uses a font preloader and Remotion helpers to load families used by text and caption elements. System fonts work out of the box; Google Fonts can be referenced by family name.

1) Where fonts are used

  • Text elements: TextElement.fontFamily (or font)
  • Caption tracks: CaptionTrack.style.fontFamily
  • Canvas/preview components use fallbacks so the UI remains responsive while fonts load.

2) Preview loading

  • Client preloader scans current project text/caption fonts and injects a Google Fonts CSS link for each family.
  • File: app/components/FontPreloader.tsx (used via providers.tsx on editor routes).
  • Skips common system fonts (Arial, Helvetica, etc.).
  • Timeouts are tolerated; the UI falls back to default stacks while fonts finish loading.

3) Export loading

For Remotion‑based overlays and FFmpeg composition helpers, we ensure fonts are registered before rendering.

  • Helpers: app/utils/remotion-font-loader.ts (loadRemotionFont/Fonts, getFontFamilyWithFallbacks).
  • System fonts are treated as already available; Google families are requested and cached.
  • Export engines query used fonts and load them once per session.

4) Supported families

  • System font stack (Arial/Helvetica/Times/Georgia/Verdana/Tahoma/Trebuchet/Impact) — no network required.
  • Popular Google families (Inter, Roboto, Poppins, Lato, Montserrat, Oswald, Raleway, etc.).
  • For families outside the list, the app will render with configured fallbacks.

5) How to pick a font

  • Text: Select the Text panel, add a text item, and choose the family in the Properties panel.
  • Captions: Choose a caption track and set font family in caption styles.

6) Fallbacks & performance

  • All families resolve to a stack: e.g., "Poppins", Inter, system-ui, -apple-system, sans-serif.
  • On mobile, only a few Google CSS links are preloaded to keep first paint fast (app/layout.tsx).
  • If a font fails to load, preview uses the fallback stack; export uses whichever fonts were successfully registered.

7) Troubleshooting

Text renders with a default font

Ensure the family is spelled correctly (e.g., Poppins). Wait for the preloader to fetch the CSS or switch to a system font for quick checks.

Exported video uses the fallback

The export helper attempts to load families used in text/captions. If a web font is unavailable, the fallback renders. Prefer common families for guaranteed results.

Corporate network blocks fonts.googleapis.com

Switch to a system font or use a family already bundled/available on the device. The app does not bundle font files by default.

8) Files & helpers

  • Preloader: app/components/FontPreloader.tsx
  • Remotion font utils: app/utils/remotion-font-loader.ts
  • Font metadata: app/data/fonts/*
  • Layout preconnect/preload hints: app/layout.tsx