ebooksfontspublishing

Embedding custom fonts in transmedia comics and graphic novels

uunicode

2026-01-27

10 min read

A studio-focused, technical walkthrough for embedding non-Latin and custom glyphs in EPUB, CBZ, and motion exports—preserve rendering, licensing, and accessibility.

Fix inconsistent text rendering across platforms — the practical guide studios need

Studios like The Orangery ship transmedia narratives across EPUB, CBZ, and motion-graphic output. Yet the same custom glyph that looks perfect on a developer workstation can break on an e‑reader, a mobile comic app, or a streaming motion reel. This article gives you a pragmatic, standards-aware walkthrough (2026) for embedding non-Latin and custom glyphs while preserving rendering consistency, accessibility, and licensing compliance.

Why this matters now (2025–2026 trends)

Adoption of modern font formats and vector color fonts (COLR/CPAL) rose across platforms in late 2025—meaning richer glyphs are possible but must be packaged correctly to render consistently.
Reading apps and motion export tools tightened font handling and sandboxing—embedding and subsetting are now more important to control final output.
Accessibility and internationalization requirements have become stricter; correct language metadata, selectable text, and grapheme-aware segmentation matter for compliance and searchability.

High-level strategy for multi-format font delivery

Think of font delivery as three parallel problems: packaging (how the font files travel with the content), shaping (how the rendering engine composes glyphs for complex scripts), and failover (what happens when the preferred font isn’t available). The rest of this guide walks these problems through for EPUB, CBZ, and motion-graphics exports.

1) EPUB (reflowable and fixed-layout) — best practices

Embed vs reference: choose embedding when you control distribution

EPUB readers vary. If you can control distribution (store, DRM, or direct file), embed the fonts in the EPUB package. For public app stores, verify the store’s font rules. Embedding guarantees glyph availability for non-Latin scripts and custom PUA glyphs.

Packaging: where fonts go and how to reference them

Create a /fonts folder in OEBPS (or the root content folder).
Add font files in WOFF2 (preferred for size) and TTF/OTF where needed. Keep a TTF/OTF source for shaping-sensitive scripts.
Reference fonts in your CSS using relative paths.

CSS pattern (EPUB-friendly)

@font-face {
  font-family: 'OrangeryDisplay';
  src: url('../fonts/orangery-display.woff2') format('woff2'),
       url('../fonts/orangery-display.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF, U+0600-06FF; /* adjust for your glyph sets */
}

body { font-family: 'OrangeryDisplay', serif; }

Tips: include a TTF fallback if the reader’s font engine needs binary shapes for shaping (complex scripts). Use unicode-range to let clients fallback gracefully for glyphs you intentionally don’t include.

Subsetting and size

Use fonttools’ pyftsubset to create a subset that contains only the glyphs you need (including diacritics and PUA glyphs). This reduces EPUB size and helps with store review.

pyftsubset source.ttf --output-file=orangery-subset.woff2 --flavor=woff2 --unicodes=U+0020-00FF,U+0400-04FF,U+E000-E0FF --layout-features='*' --glyph-names

Keep a version that preserves OpenType GSUB/GPOS features if your text relies on shaping/ligatures.

Normalization and shaping

Normalize your text to NFC before packaging so combining marks map to stable code points across readers. For JavaScript preprocess steps:

// Node.js example
const fs = require('fs');
let content = fs.readFileSync('chapter.xhtml', 'utf8');
content = content.normalize('NFC');
fs.writeFileSync('chapter.xhtml', content);

For scripts requiring shaping (Arabic, Devanagari, Indic, Thai), test on multiple engines (WebKit/Safari, Blink/Chromium, Gecko/Firefox). If automatic shaping breaks, include the TTF and ensure the EPUB reader loads your font early.

Accessibility and language metadata

Set the document and element level xml:lang correctly for each language block.
Keep selectable text for screen readers rather than rasterized images where possible.
Include alternate text for non-text glyphs and a text layer for complex layouts.

2) CBZ — common pitfalls and pragmatic solutions

CBZ files are ZIP archives of images. No native font embedding exists, so you must bake or attach text appropriately.

Approaches

Rasterize text into PNG or WEBP images at a high enough DPI. Reliable but loses accessibility and selectable text.
Embed text as SVG layers inside the CBZ. SVG supports embedded fonts and is scalable—best for preserving vector glyphs and complex scripts.
Provide sidecar text (e.g., .txt or .xhtml files) for accessibility and search while keeping images for display.

SVG with embedded fonts (recommended for complex glyphs)

SVG can embed fonts via a base64 data URL inside a <style> element. This preserves the exact glyph shapes and can include OpenType features if the viewer’s rendering engine supports it.

<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1800'>
  <defs>
    <style type='text/css'>
      @font-face { font-family: 'OrangeryDisplay'; src: url('data:font/woff2;base64,BASE64DATA') format('woff2'); }
      text { font-family: 'OrangeryDisplay'; font-size: 48px; }
    </style>
  </defs>
  <text x='40' y='120'>Custom glyph:  and Arabic: مرحبا</text>
</svg>

Then include this SVG in the CBZ ZIP alongside your raster assets. Test popular CBZ readers. Some readers may rasterize SVG at import, so generate a high-resolution fallback.

Sidecar text and searchability

Include an XHTML/HTML file per page with the exact text (normalized and marked with lang). This helps screen readers and allows text search even though the CBZ display is image-first.

3) Motion-graphics exports (AE, Lottie, web video)

Motion exports are the trickiest because fonts may either be baked into vectors, rasterized frame-by-frame, or referenced at runtime (web). Each choice affects file size, localization flexibility, and rendering fidelity.

After Effects and frame export

Convert text to shapes whenever possible to bake glyph vectors into the composition. This guarantees visual fidelity across devices but prevents dynamic localization.
If you must keep live text for later edits or localization, include the font file with the project and embed it when exporting to render engines that support packaging fonts (some render farms and Adobe Media Encoder settings). See our field reviews of capture and export workflows like Compact Live‑Stream Kits and the PocketLan / PocketCam workflow for examples of field setups that keep fonts and assets synchronized with media.

Lottie / Bodymovin workflows

Lottie exports can include glyphs in the JSON via the fonts and glyphs arrays. The Bodymovin exporter can serialize glyph shapes, which removes the dependency on the target device having the font.

// Example Lottie fonts block (simplified)
"fonts": {
  "list": [{
    "family": "OrangeryDisplay",
    "fFamily": "OrangeryDisplay",
    "style": "Regular",
    "glyphs": [ { "ch": "A", "size": 48, "data": {...} }, ... ]
  }]
}

This increases JSON size but ensures consistent glyphs and shaping. For non-Latin scripts, ensure the glyphs array contains all needed combining sequences and ligatures. See our field reviews on export workflows for tips on balancing fidelity and payload (for example, the PocketLan / PocketCam review and compact live-stream kit notes).

Web video (MP4/WebM)

For streaming assets, the safe move is to rasterize titles and dialog into high-resolution frames (or render vectors to high-bitrate video). If you must overlay dynamic captions client-side, use web fonts (WOFF2) with fallbacks handled by your player.

Custom glyphs, PUA, and OpenType features

Custom icons and glyphs often live in the Private Use Area (PUA). That works but has trade-offs: poor interoperability and risk of collision. Consider:

Using private glyphs only within your font family and embedding that font everywhere the content runs.
Alternatively, map custom artwork to SVG symbols in a separate asset used by readers and web players.

Preserve OpenType features

If your custom glyphs depend on ligatures, contextual alternates, or script-specific substitutions, make sure your subset operation preserves GSUB/GPOS tables. With fonttools:

pyftsubset source.ttf --output-file=subset.ttf --unicodes=... --keep-glyph-names --layout-features='*'

Shaping, grapheme clusters, and normalization

Complex scripts rely on shaping engines (HarfBuzz, Uniscribe, CoreText). Key practical rules:

Normalize to NFC during content generation to avoid splitting grapheme clusters across files. Clients usually expect composed forms.
For programmatic splitting and cursor movement, use a Unicode-aware segmenter: Intl.Segmenter in browsers or Unicode Text Segmentation libraries server-side.
Test Zero Width Joiner (ZWJ) and combining characters. Emoji sequences and script ligatures often require precise ZWJ placement.

JS examples

// Grapheme-aware iteration (browser / Node 14+)
const s = '👩‍🚀🇯🇵क्‍ष';
const seg = new Intl.Segmenter('en', { granularity: 'grapheme' });
for (const { segment } of seg.segment(s)) console.log(segment);

// Normalization
const normalized = s.normalize('NFC');

Font licensing checklist (do this before you embed)

Confirm embedding rights: desktop vs web vs app embedding. The license must allow conversion/subsetting to WOFF2 if you intend to do so.
Check whether the license restricts embedding inside distributed packages (EPUB/CBZ) or streaming assets.
Retain original license files inside the package (put a copy in /fonts/LICENSE.txt) and include provenance information as you would with responsible packaging and distribution best practices (responsible data & provenance).
For open-source fonts: prefer SIL Open Font License (OFL) for broad embedding allowances. Still review attribution rules.
When purchasing commercial fonts, get a written SKU that explicitly covers embedding and conversion operations you need.

End-to-end pipeline example: The Orangery (practical checklist)

Here’s a reproducible pipeline for a chapter that includes Arabic dialogue, custom PUA glyphs, and a motion intro.

Author text in the studio CMS; ensure authors save with utf-8 without BOM and normalize to NFC on save.
Generate a glyph usage table from text (script that outputs unique codepoints). Use that for subsetting.
Run pyftsubset to create WOFF2 + TTF subsets that preserve layout tables (GSUB/GPOS, GDEF).
Embed fonts in EPUB fonts/ and reference them in your global CSS with unicode-range and font-display: swap.
For CBZ, create SVG page layers embedding the WOFF2 fonts as base64 for pages with dynamic text; rasterize full pages at 300–600 DPI for readers that don't support SVG fonts.
For motion intro, in After Effects: keep editable text for work-in-progress but convert to shapes in final render and export high-bitrate video. For Lottie exports, ensure glyphs are serialized in the JSON fonts array.
Package licensing files into each format and run automated tests on Chromium, WebKit, Firefox, two major EPUB readers, and a Lottie player.

Testing matrix and QA

Create a matrix that includes at minimum:

EPUB on: iOS Books, Google Play Books, Kobo, Calibre (desktop)
CBZ on: CBR/CBZ reader on Android, iOS comic apps, KoodoReader or similar
Motion: MP4 on iPhone/Android, Lottie on web and mobile SDK
Accessibility checks: screen reader linearization, text-to-speech, high-contrast mode

Automated checks you should run

Search for missing glyphs (tofu) by scanning rendered pages for U+FFFD or empty boxes.
Verify GSUB-driven ligatures render by testing known sequences in each engine.
Confirm language tags match displayed scripts with a small script that flags mismatches.

Advanced strategies and future-proofing (2026+)

As platforms continue to adopt vector color fonts and richer OpenType features, prepare your assets by:

Keeping the original full‑OTF/TTF master fonts in your archive and generating subsets per release.
Using COLR/CPAL or SVG-in-font only when target platforms support them; provide fallbacks for monochrome glyphs when necessary.
Monitoring shaping engine updates (HarfBuzz, CoreText changes) and integrating nightly tests into CI for critical render paths — pair that with edge/hybrid workflow guidance and on-device validation strategies (edge-first model serving).
Consider content negotiation: ship a small reflowable EPUB for accessibility and a fixed-layout high-fidelity package for retail or press kits.

Practical rule: guarantee glyph availability where you control the runtime (EPUB, Lottie glyphs, SVG in CBZ). Where you don’t (user’s reader, generic streaming platform), rasterize or convert text to vectors at export.

Actionable takeaways (checklist)

Normalize to NFC and use grapheme-aware segmentation in your tooling.
Subset fonts but preserve GSUB/GPOS for complex scripts and ligatures.
Embed WOFF2 + TTF in EPUB; include license files.
Use SVG embedding in CBZ for selectable/scaleable text; provide raster fallbacks.
For motion export: convert to shapes (AE) or embed glyphs (Lottie) to guarantee consistency.
Audit licenses before converting or embedding fonts.
Test across a small but diverse QA matrix (WebKit, Blink, Gecko; two EPUB readers; two CBZ readers; two Lottie players).

Resources and tools

fonttools (pyftsubset) — subsetting and format conversions
HarfBuzz / shaping test harnesses — verify complex script behavior
Intl.Segmenter (browser) and unicode-segmentation libraries — grapheme-aware processing
Bodymovin / Lottie — export glyphs for motion assets
EPUBCheck — validate EPUBs (run sign-off validation)

Final thoughts

For transmedia studios like The Orangery, typographic fidelity is part of brand identity. The extra engineering—embedding the right font format, preserving shaping tables, normalizing text, and verifying licenses—pays dividends: consistent storytelling, fewer support tickets, and accessible content that reaches global audiences.

Next step (call-to-action)

Start with an audit: run a glyph-usage export from your CMS and subset one font for an EPUB and one for an SVG-based CBZ page. If you want a starter script or a checklist tailored to your pipeline, contact our team for a downloadable audit kit and sample automation scripts built for comic/graphic-novel pipelines. For field capture and export workflows, check our hands-on reviews such as the Compact Live‑Stream Kits field review and the PocketLan / PocketCam workflow.

unicode

Contributor

Senior editor and content strategist. Writing about technology, design, and the future of digital media. Follow along for deep dives into the industry's moving parts.