How to whitelist custom brand fonts for luxury marketing pages
- Step 1Lock the hero copy with the brand team — Whitelisting is for fixed text. Get sign-off that the hero wordmark and tagline won't change per-campaign — or commit to regenerating the subset whenever they do. Note every glyph: the accented letters in a French maison name, the ampersand, the em dash in a tagline, the ® or ™.
- Step 2Confirm the bespoke font covers every hero glyph — Run the [Character Coverage Map](/font-tools/character-coverage-map) (it scores against 346 real Unicode blocks) to verify the display face contains your exact characters — especially accents and symbols, which custom display fonts sometimes omit.
- Step 3Upload the display font and paste the hero string — Drop the TTF/OTF/WOFF/WOFF2 onto the [Whitelist Builder](/font-tools/character-whitelist-builder). In the single 'Characters to keep' box, paste the literal hero wordmark and tagline together. Include spaces and punctuation. This is a Pro-tier tool; the 50 MB Pro file limit covers any display font.
- Step 4Decide whether dropped kerning is acceptable — The output drops `kern`/`GPOS`/`GSUB`. Preview the hero with the subset: if the spacing and any ligatures still read as 'on brand', proceed. If the maison's logo relies on a specific kern or a swash 'ss01', use the [layout-preserving pipeline path](/font-tools/guides/whitelist-script-marketing-build-pipeline) instead.
- Step 5Download the TTF and compress to WOFF2 — You get `<stem>.subset.ttf`. Run it through [TTF→WOFF2](/font-tools/ttf-to-woff2) to reach the few-KB size. Optionally strip hinting first with the [Hinting Stripper](/font-tools/hinting-stripper) — display type renders large, so hinting rarely earns its bytes.
- Step 6Embed with a graceful luxury fallback — Build the `@font-face` with the [Font-Face Generator](/font-tools/font-face-generator), set `font-display: swap`, and choose a refined system-serif fallback (`Georgia, 'Times New Roman', serif`) so the hero reads elegantly even in the swap window. A tiny WOFF2 means the swap window is brief.
Luxury hero-font workflow at a glance
Each stage and the right tool. The Whitelist Builder is one link in the chain — it produces the TTF; compression and embedding are separate, deliberate steps.
| Stage | Tool | Output | Why it matters for premium pages |
|---|---|---|---|
| Verify coverage | Character Coverage Map | Block report | Confirms accents/symbols in the maison name exist before you cut |
| Subset to hero glyphs | Character Whitelist Builder | Uncompressed TTF | Keeps only the wordmark + tagline glyphs |
| Compress | TTF→WOFF2 | WOFF2 (~few KB) | The actual size win — this is where ~1.5–3 KB happens |
| Trim hinting (optional) | Hinting Stripper | Smaller TTF | Display type renders large; hinting bytes rarely pay off |
| Embed | Font-Face Generator | @font-face CSS | font-display: swap + serif fallback keeps the page elegant |
What survives and what's lost for a bespoke face
The whitelist rebuild preserves outlines and basic metrics but drops the refinements premium foundries charge for. Plan the hero around this.
| Property | Survives? | Implication for luxury type |
|---|---|---|
| Glyph outlines (Béziers) | Yes, byte-exact | The bespoke letterforms look identical |
| Units-per-em, ascender, descender | Yes | Vertical metrics and proportion are preserved |
Kerning (kern/GPOS) | No — dropped | Hand-tuned pairs (e.g. 'VOGUE' V-O) revert to default spacing |
Ligatures / stylistic sets (GSUB) | No — dropped | A signature swash or fi ligature won't render |
| TrueType hinting | Partial (attached to kept glyphs) | Rarely matters at hero sizes; strip for extra bytes |
Full name/license metadata | Family name kept; rest not faithful | Subset is still bound by the original license |
Cookbook
Real luxury-page patterns. The recurring guard: include every accented letter and symbol in the maison name, and decide consciously about the dropped kerning.
Maison wordmark with an accented name
ExampleA French/Italian house name often carries an accent. Each accented letter is a distinct codepoint that must be in the whitelist, or it tofus.
Characters to keep:
MAISON CRÉMÉ
Unique glyphs: M A I S O N ␣ C R É M
Guard: É is U+00C9 (precomposed). Confirm the display
font has É before cutting — many custom display
faces ship caps without accents.
Output: MaisonCreme.subset.ttf -> WOFF2 ~2 KBWordmark + couture tagline + year
ExampleHero plus tagline plus an established-since year is still a fixed, knowable glyph set. Paste both strings into one box.
Characters to keep:
VELOUR — Atelier since 1921
Unique glyphs include the em dash (—, U+2014) and digits.
Guard: the real em dash, not a hyphen (-), or the dash
renders .notdef. ~25 glyphs total.Decide on kerning before you ship
ExamplePreview the subset hero against the full font. If the brand's signature spacing is gone, don't ship the in-browser subset — use the kerning-preserving pipeline.
Compare in the browser: Full font hero vs subset hero (kern dropped) If 'AVA' or 'To' now looks loose: -> use pyftsubset --layout-features='*' --text-file=hero.txt -> see /font-tools/guides/whitelist-script-marketing-build-pipeline Else (caps geometric mark, spacing fine): -> proceed with the in-browser subset
Compress and trim for the smallest elegant hero
ExampleAfter whitelisting, strip hinting (display type is large) then convert to WOFF2 — the two-step that turns the TTF into a few-KB asset.
Step 1 Whitelist Builder -> Velour.subset.ttf Step 2 /font-tools/hinting-stripper -> Velour.unhinted.ttf (optional) Step 3 /font-tools/ttf-to-woff2 -> Velour.woff2 (~2 KB) Result: bespoke hero type at near-zero bandwidth.
Embed with an elegant fallback and swap
ExampleA tiny hero font plus font-display: swap plus a refined serif fallback means the page never blocks and never looks broken during load.
@font-face {
font-family: "VelourDisplay";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/Velour.woff2) format("woff2");
}
.hero { font-family: "VelourDisplay", Georgia, "Times New Roman", serif; }
/* Generate this block: /font-tools/font-face-generator */Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
Signature kerning of the wordmark is lost
Kerning droppedPremium display type is often hand-kerned — the gap in 'VOGUE' between V and O, the tuck under 'Ta'. The whitelist rebuild drops kern/GPOS, so those pairs revert to default sidebearings. For a luxury mark this can read as 'off'. Preview before shipping; if the spacing is part of the brand, use a layout-preserving subsetter (pyftsubset/hb-subset) in a pipeline rather than the in-browser tool.
A signature ligature or swash doesn't render
OT features droppedIf the maison's logo uses an OpenType ligature or a stylistic-set swash (ss01, dlig), GSUB is dropped in the subset and the feature won't fire — you get the plain base glyphs. The look changes. Either bake the swash into the design as a single drawn glyph the foundry provides, or keep the feature-bearing font and use a layout-preserving pipeline.
The maison name's accent isn't in the font
Coverage gapCustom display faces are frequently drawn caps-only without accents. If 'CRÉMÉ' needs É (U+00C9) and the font lacks it, the whitelist silently maps É to .notdef (a box). The tool only errors if every character misses. Run the Character Coverage Map first; if the accent is absent, commission it or render the accent as a separate styled element.
Expecting WOFF2 straight from the tool
By designThe Whitelist Builder outputs uncompressed TTF only — the ~1.5–3 KB figure is post-WOFF2. For a luxury page where every KB on the critical path counts, the TTF→WOFF2 step is mandatory, not optional. Never ship the .subset.ttf directly.
OTF/CFF display font fails to write
Writer errorMany bespoke display faces ship as OTF with CFF (PostScript) outlines. opentype.js's writer can throw on those — the tool reports a writer failure. Convert the OTF to a TrueType-outline TTF in a desktop app first, or run pyftsubset/hb-subset, which handle CFF cleanly and also preserve the kerning luxury type wants.
Hero copy changes per campaign and tofus
RegenerateLuxury campaigns rotate hero copy seasonally. A whitelist cut for the spring line tofus on a new autumn glyph. Either re-run the whitelist each campaign, or automate it from the rendered page (see the build-pipeline guide). If the hero is genuinely dynamic, a Latin charset subset is the safer choice.
Subsetting is not relicensing
Carried overProducing a tiny subset of a licensed foundry font does not change the license — the subset is still governed by the original EULA, which often restricts web embedding and redistribution. Confirm the bespoke font's license permits self-hosted web use before shipping the subset. The subset's family name is carried from the source; the rest of the name table isn't faithfully reproduced.
Numerals look plain without tabular/oldstyle features
Features droppedIf the brand uses oldstyle or tabular figures via OpenType features (onum, tnum) on a pricing or 'established' year, those features are in GSUB and are dropped — you get the default figure style. Whitelist the figure glyphs you want, but accept they'll render in the font's default figure design, not the feature-selected variant.
Frequently asked questions
Can I ship a bespoke display font under 3 KB?
Yes, for a small hero glyph set — but in two steps. The Whitelist Builder outputs an uncompressed TTF (a few KB for ~15–40 glyphs); running that through TTF→WOFF2 is what lands you in the ~1.5–3 KB range. The tool itself doesn't produce WOFF2, so plan for the conversion step. The result is bespoke hero type at near-zero bandwidth.
Will my hand-kerned wordmark still look right after subsetting?
Possibly not. The whitelist rebuild drops kern/GPOS, so hand-tuned letter pairs revert to default spacing. For a geometric caps mark this is usually invisible; for a refined editorial wordmark where the kerning is part of the brand, it will read as loose. Preview the subset against the full font, and if the spacing matters, use a layout-preserving subsetter (pyftsubset --layout-features='*' or hb-subset) in a pipeline instead — see the whitelist pipeline guide.
What about my signature ligature or swash?
Those are OpenType GSUB features, which the subset drops — the swash or ligature won't render, leaving the plain base glyphs. If the swash is essential to the mark, ask the foundry for it as a single drawn glyph you can whitelist directly, or keep the feature-bearing font and subset with a layout-preserving engine in a build pipeline.
Is my unreleased brand font safe to upload?
Yes — the tool runs entirely in your browser on opentype.js. An exclusive or unreleased display face never reaches a server; only an anonymous usage counter is recorded for signed-in stats. This is important for luxury brands working with single-client commissioned typefaces under strict NDAs.
How do I make sure the accent in our maison name is included?
First confirm the font even has it — run the Character Coverage Map and check for the codepoint (e.g. É is U+00C9). Custom display faces are often drawn caps-only without accents. If it's present, paste the precomposed accented character into the whitelist. If it's absent, the character will render as a .notdef box, and you'll need the accent commissioned or rendered as a separate styled element.
Does this work with OTF display fonts?
It accepts OTF input, but OTF fonts with CFF (PostScript) outlines can trip opentype.js's writer on output, producing a 'writer failed' error. Many bespoke display faces are CFF OTFs, so if you hit this, convert to a TrueType-outline TTF first, or use pyftsubset/hb-subset — which also preserve the kerning luxury type relies on.
What fallback font should a luxury page use?
A refined system serif: Georgia, 'Times New Roman', serif, with font-display: swap. Because the subset hero is tiny, the swap window is brief, so visitors see the bespoke face almost immediately while never staring at a blank hero. Generate the @font-face with the Font-Face Generator to get the block right.
Does subsetting let me sidestep the font license?
No. A subset is still the licensed font and is bound by the original EULA — many foundry licenses restrict web embedding and redistribution regardless of glyph count. Verify the bespoke font's license permits self-hosted web use before shipping the subset. Subsetting changes the bytes, not the legal terms.
Can I subset multiple display weights for one campaign?
Yes, but one file at a time — run the Whitelist Builder once per weight (e.g. the hairline for the wordmark, the regular for the tagline). Each produces its own TTF; give each @font-face the matching font-weight. For seasonal campaigns, automating the per-weight subset from the rendered page keeps everything in sync.
Should I strip hinting from a luxury hero font?
Usually yes. Hero display type renders large, where TrueType hinting (which optimizes small-size rendering) earns almost nothing. Running the subset through the Hinting Stripper before WOFF2 shaves more bytes with no visible quality loss at hero sizes. Test at your actual hero size to be sure.
What if the campaign hero copy changes?
A whitelist cut for one campaign will tofu on a new glyph in the next. Either re-run the Whitelist Builder each campaign, or automate the regeneration from the rendered hero copy on every deploy (see the build-pipeline guide). If the hero text is truly dynamic, subset to a Latin range with the Font Subsetter instead so unexpected characters still render.
How does whitelisting compare to just using a webfont service?
A webfont service ships the full character set (or a generic language subset) and routes the request through a third party — slower and a privacy/GDPR concern. Whitelisting self-hosts a micro-font of only your hero glyphs: faster, no third-party request, and the bespoke face stays under your control. The trade is the dropped kerning, which you mitigate by previewing or moving to a layout-preserving pipeline when it matters.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.