Zum Hauptinhalt springen

Fonts

Organizations upload their own fonts to use across all templates. The platform also offers Google Fonts as a quick-start option, but the focus is on custom brand typography.

Key capabilities:

  • Custom font uploads: TTF, OTF, WOFF, WOFF2 (max 10 MB per file)
  • Multi-variant support: Multiple weights and styles per font family (regular, bold, italic, etc.)
  • Automatic metadata extraction: Format, weight, style, and glyph count are detected from the font file
  • Google Fonts: Available out of the box as a convenience — no upload needed
  • Consistent rendering: Fonts render identically in the editor preview and final exports

How it works​

Fonts are managed at the organization level and available to all templates within that organization. When a template references a font by family name, the platform resolves the correct file based on the requested weight and style.

Upload your brand fonts via the API or the Brand Kit UI. The platform detects the font format from magic bytes (independent of the file extension) and extracts metadata automatically. Google Fonts can be added from the built-in library without uploading files.

Font Structure​

Fonts are organized by family name with multiple variants. Each font family can have variants like:

  • Regular (400 weight, normal style)
  • Bold (700 weight, normal style)
  • Italic (400 weight, italic style)
  • Bold Italic (700 weight, italic style)

The Font Object​

Custom font object structure:

interface CustomFont {
  id: string;                    // UUID
  name: string;                  // Font family name
  organizationId: string;        // Organization ID
  
  variants: FontVariant[];       // Array of font variants
  
  createdAt: Date;
  updatedAt: Date;
}

interface FontVariant {
  label: string;                 // Variant label (e.g., "Regular", "Bold")
  ttfSource: string;             // URL to font file
  fontWeight: string;            // Font weight (e.g., "400", "700")
  format?: 'ttf' | 'otf' | 'woff' | 'woff2';  // Detected font format
  style?: 'normal' | 'italic';  // Font style
  glyphCount?: number;           // Number of glyphs in the font
}

Google Fonts use a simpler configuration since files are served from Google's CDN:

interface GoogleFontConfig {
  fontFamily: string;            // Font family name (e.g., "Roboto")
  variants: string[];            // Variant strings (e.g., ["400", "700", "400italic"])
}

Using Fonts in Templates​

In template text elements, fonts are specified by family name. There is no distinction between custom and Google Fonts at the template level:

{
  "type": "text",
  "style": {
    "fontFamily": "Helvetica Neue",
    "fontWeight": "700",
    "fontStyle": "normal"
  }
}

The platform automatically resolves the font source and loads the appropriate file.

Font Loading​

When rendering templates:

  • Editor preview: Custom fonts are loaded from S3, Google Fonts from Google's CDN
  • Renderer: Fonts are downloaded and cached locally, with fallback to system fonts if download fails
  • Template export: Only fonts actually used in the template are packaged into the .heycreo file

Fallback Logic​

The platform includes intelligent font fallback:

  1. Tries to load the exact weight and style requested
  2. Falls back to normal style if italic is not available
  3. Falls back to weight 400 (regular) if the requested weight is not available
  4. Falls back to any available variant if no match is found
  5. Falls back to system fonts as a last resort

See also​