Web Fonts

Overview

Web Fonts use standard font files to render personalised text on-screen. Unlike Custom Fonts (which use individual character images), Web Fonts display text using a real font — either uploaded directly or loaded from an external URL.

When to Use Web Fonts

• On-screen text previews for product personalisation
• Scenarios where you want styled text rendering without per-character images
• When the font is already available as a TTF, OTF, or WOFF file

Creating a Web Font

1. Navigate to Typography in the sidebar
2. Click Add Typography
3. Select Web Font as the typography option

Required Fields

Field	Description
Name	A descriptive name for this typography (e.g., "Script Display Font")
Font Source	How the font is provided — Internal (file upload) or External (URL)
Colour	The hex colour code for rendered text (e.g., #C4A35A)

Internal Font (File Upload)

Upload a font file directly to Builda.

Field	Description
Font File	The font file to upload

Supported formats: .ttf, .otf, .woff, .woff2

External Font (URL)

Link to a font hosted elsewhere (e.g., Google Fonts).

Field	Description
Font URL	A valid URL pointing to the font file

Data Structure

Web Font typographies store their configuration as a JSON array:

[
  {
    "font_source": "Internal",
    "color": "#C4A35A",
    "font_file": { "data": "...", "extension": "ttf" },
    "original_file_name": "ScriptFont.ttf"
  }
]

Or for external fonts:

[
  {
    "font_source": "External",
    "color": "#333333",
    "font_url": "https://fonts.example.com/script-font.woff2"
  }
]

How Web Fonts Render

When a customer enters text in the product configurator:

1. The font is loaded into the browser
2. Text is measured and laid out using SVG-based text measurement
3. Characters are rendered on a canvas with support for scaling, rotation, and curved text paths

Next Steps

• Custom Fonts — Alternative: use image-based characters with SKU mapping
• Characters & Character Sets — If using Custom Fonts, add characters next