How to brand-first vs performance-first font-display decisions
- Step 1Classify the surface, not just the site — A 'brand site' still has body copy, and a 'performance site' still has a logo. Decide per `@font-face`: is this face carrying brand identity (logo, hero, display headings) or readable content at volume (article body, product descriptions, UI labels)? The first is brand-first, the second performance-first.
- Step 2Pick the matching use case in the picker — Open the **Use case** select. Brand-first surface → **Brand-critical** → recommends `swap`. Performance-first surface → **Performance-critical** → recommends `optional`. Unsure / general site → **Balanced** → also recommends `swap`. That single select is the entire input.
- Step 3Generate and copy the recommended value — Press **Generate**. The output explains all five values and prints `Your choice for a <use case> workflow: font-display: <value>;` plus an `@font-face` skeleton. Copy the `font-display:` line into your real rule for that surface.
- Step 4Apply per surface, with distinct family names — To run brand-first on the hero and performance-first on the body, declare two `@font-face` blocks with distinct `font-family` names — one `swap`, one `optional` — and map `h1` and `body` accordingly. Generate the full blocks with the [font-face generator](/font-tools/font-face-generator).
- Step 5Minimise the brand-first flash — If a brand surface uses `swap`, the FOUT reflow is shorter when the font arrives sooner. Preload the critical brand font with the [preload tag builder](/font-tools/preload-tag-builder), and consider metric overrides (`size-adjust`) so the swap moves the layout less.
- Step 6Validate the conversion-critical surfaces — Throttle to Slow 4G and confirm that price, CTA, and headline text are never invisible. Brand-first `swap` keeps them readable in the fallback; never use `block`/`auto` on text a visitor needs to act on. Re-check after every redesign.
Recommended default by site type
Starting recommendations by industry. These are defaults for the dominant surface; almost every site mixes brand-first display faces with performance-first body faces. The picker use case that produces each value is shown.
| Site type | Lean | Default value | Picker use case |
|---|---|---|---|
| Luxury / fashion / agency portfolio | Brand-first | swap | Brand-critical |
| Marketing / landing pages | Brand-first | swap | Brand-critical |
| Large e-commerce catalogue | Mixed → performance on body | optional (body), swap (logo) | Performance-critical / Brand-critical |
| News / publishing at scale | Performance-first | optional | Performance-critical |
| SaaS dashboard / app UI | Performance-first | optional | Performance-critical |
| Documentation / knowledge base | Performance-first | optional | Performance-critical |
| General small business / blog | Balanced | swap | Balanced |
Brand-first vs performance-first, side by side
The two postures and what each one guarantees and gives up. swap is the brand-first value; optional is the performance-first value.
| Question | Brand-first (swap) | Performance-first (optional) |
|---|---|---|
| Does the brand font always appear? | Yes, even if late | No — skipped if not near-instant on a cold visit |
| Is there a late reflow? | Yes (FOUT swap) | No — fallback stays for the session |
| Time to readable text | Immediate (fallback) | Immediate after ~100ms |
| First-visit brand fidelity | High (font shows once loaded) | Low (often fallback all session) |
| Best surfaces | Logo, hero, display headings | Article body, product copy, UI labels |
Cookbook
Per-industry snippets showing the recommended value in a real rule. The picker emits the value; these show where it sits. Build complete blocks with the font-face generator.
Luxury / agency — brand-first swap on the display face
ExampleWhen the typeface is the brand, the font must appear even if it arrives a beat late. swap guarantees that. The picker's Brand-critical mode emits this. Accept the FOUT; minimise it with preload.
@font-face {
font-family: "BrandDisplay";
src: url("/fonts/branddisplay.woff2") format("woff2");
font-display: swap; /* brand-first: always show the font */
}
h1, .hero, .logo { font-family: "BrandDisplay", Georgia, serif; }News / docs — performance-first optional on body
ExampleReaders scanning long articles must not have text reflow under their eyes. optional renders the fallback after ~100ms and only uses the web font if it is near-instant. Performance-critical mode emits this.
@font-face {
font-family: "ReadBody";
src: url("/fonts/readbody.woff2") format("woff2");
font-display: optional; /* performance-first: no mid-read reflow */
}
body, article { font-family: "ReadBody", system-ui, sans-serif; }E-commerce — mixed: swap logo, optional body
ExampleLarge catalogues want the brand mark to always render (swap) but product copy and prices to be instantly readable without reflow (optional). Two faces, two values, distinct family names.
/* brand mark — brand-first */
@font-face {
font-family: "ShopBrand";
src: url("/fonts/shopbrand.woff2") format("woff2");
font-display: swap;
}
/* product copy + prices — performance-first */
@font-face {
font-family: "ShopBody";
src: url("/fonts/shopbody.woff2") format("woff2");
font-display: optional;
}
.logo { font-family: "ShopBrand", serif; }
body, .price, .product-desc { font-family: "ShopBody", system-ui, sans-serif; }Balanced small site — swap everywhere
ExampleA small business site or blog with no extreme priority is well served by swap across the board: the font always eventually shows, the only cost is a possible reflow on slow connections. This is what the picker's default Balanced mode emits.
@font-face {
font-family: "SiteFont";
src: url("/fonts/sitefont.woff2") format("woff2");
font-display: swap; /* balanced default */
}
body { font-family: "SiteFont", system-ui, sans-serif; }Conversion-critical: never hide the CTA
ExampleOn any surface where the visitor must read to act — price, Buy button, headline — the wrong choice (block/auto FOIT) can hide that text for seconds and cost the sale. swap keeps it readable in the fallback immediately. This before/after is the e-commerce-safe fix.
/* DON'T: FOIT can hide the price/CTA on slow networks */
@font-face { font-family: "X"; src: url("/fonts/x.woff2"); font-display: block; }
/* DO: readable immediately, brand font swaps in */
@font-face { font-family: "X"; src: url("/fonts/x.woff2"); font-display: swap; }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.
'Brand site' still needs performance-first body text
Mix per surfaceTreating the whole site as brand-first and putting swap on the body face means readers can get a reflow mid-paragraph. Even a luxury site should usually run optional (or fallback) on long-form body copy and reserve swap for the display/brand faces. The decision is per @font-face, not per site — run the picker once per surface.
performance-first optional hides the brand font on first visit
Expected tradeoptional mostly skips the web font on a cold cache, so a first-time visitor to a performance-first site usually sees the fallback for the whole session. That is acceptable for body copy but wrong for the logo or hero — those should be swap so the brand appears even on visit one. If first-visit brand fidelity matters anywhere, do not use optional there.
Invisible price/CTA text costs conversions
Avoid block/autoOn e-commerce, using block or auto on text the visitor must read to buy (price, Buy button, shipping info) can hide it for up to ~3s on a slow connection — directly costing sales. Use swap so that text is always readable in the fallback immediately. This is the one place the brand/performance trade is dominated by a third concern: conversion.
Brand-first swap reflow is jarring without metric tuning
Tune the fallbackA brand-first swap on a display face with very different metrics from the fallback produces a big, ugly jump when the font loads. font-display does not fix this — match the fallback metrics with size-adjust/ascent-override or pick a closer fallback. Brand-first does not mean ignoring the reflow; it means accepting the swap while minimising its magnitude.
Balanced is swap, not a separate 'middle' value
By designPicking Balanced does not give you fallback as a compromise — it gives swap. The tool's stance is that for an undifferentiated site, always-show-the-font (swap) is the safer balanced default than the give-up-after-3s behaviour of fallback. If you specifically want fallback on a body surface, set it by hand.
Marketing landing page judged on LCP, not brand
Re-classifyA landing page whose hero text is the LCP element is judged on how fast that text paints. swap paints the hero immediately in the fallback (good LCP) and swaps to brand later — usually the right call even though it is a 'marketing' page. Do not assume marketing = block-the-font-in; the metric that ranks the page often wants swap.
SaaS app reused across cached and uncached sessions
optional shinesA logged-in SaaS app is mostly repeat visits with a warm cache, where optional does swap to the web font (it is already cached) — so users see the brand font most of the time and never get a reflow. optional is especially good for apps because the cold-visit downside (no web font) only hits the rare first session.
The picker recommends one value; the site needs several
Run per surfaceThe tool outputs a single recommendation per run because it takes a single use case. Real sites need several values across their faces. Run the picker once per surface priority (or just apply the documented mapping directly), then assemble the multi-value stylesheet yourself or via the font-face generator.
Frequently asked questions
What's the difference between brand-first and performance-first font-display?
Brand-first (swap) guarantees the web font appears even if it loads late, accepting a FOUT reflow — right when the typeface is the identity. Performance-first (optional) guarantees no late reflow by sticking with the fallback unless the font is near-instant, accepting that the brand font may not show on a cold visit — right for readable content at volume. The picker emits swap for Brand-critical and optional for Performance-critical.
Which font-display value should an e-commerce site use?
Mixed: swap on the logo/brand mark so it always renders, and optional (or fallback) on product copy and prices so reading does not reflow. Critically, never use block/auto on price or CTA text — FOIT can hide it for seconds and cost the sale. Declare separate @font-face blocks with distinct family names per surface.
What value is best for a news or documentation site?
optional, the picker's Performance-critical recommendation. Readers scanning long articles must not have text reflow under their eyes, and these sites are judged on load performance. optional shows the fallback after ~100ms and only uses the web font if it is near-instant or cached, so repeat visitors still get the brand font without a mid-read jump.
Should a luxury or agency site always use swap?
On the brand/display faces, yes — swap guarantees the typeface that carries the identity appears. But even a luxury site should run optional or fallback on long body copy so reading is not interrupted. Classify per surface: brand-first on the hero, performance-first on the body.
Does the picker pick a value based on my industry?
Not by industry name — by priority. You tell it Brand-critical, Performance-critical, or Balanced, and it maps those to swap, optional, and swap respectively. This guide's industry table just translates common site types into one of those three priorities so you know which to select.
Why does optional sometimes never show the brand font?
optional only uses the web font if it is cached or arrives within ~100ms. On a cold first visit it usually misses that window and shows the fallback for the whole session (caching the font for next time). For a performance-first body face that is fine; for a logo or hero it is not — use swap there.
Is Balanced a compromise between swap and optional?
No — Balanced emits swap. The tool treats always-show-the-font as the safer balanced default rather than the give-up-after-3s behaviour of fallback. If you want a genuine middle ground that abandons a very late swap, set font-display: fallback; by hand; the picker will not generate it.
How do I keep the brand-first swap flash from looking bad?
Two levers: start the font fetch earlier (preload the critical brand font with the preload tag builder) and reduce how much the swap moves the layout (match the fallback metrics with size-adjust/ascent-override, or pick a closer fallback). font-display decides whether the swap happens; these decide how jarring it is.
Which value is safest for conversion-critical text?
swap. It keeps price, CTA, and headline text readable in the fallback immediately, then upgrades to the brand font. block and auto can hide that text for seconds on a slow connection — the worst outcome for conversion. When in doubt on a buy-flow surface, choose swap.
Can one stylesheet have both brand-first and performance-first faces?
Yes, and most should. Declare two @font-face blocks with distinct font-family names — one swap (brand/display), one optional (body) — and map h1/.logo and body accordingly. Generate the full blocks with the font-face generator.
Is a SaaS app a special case?
Somewhat — it is mostly warm-cache repeat visits, where optional does swap to the (already cached) web font, giving brand fidelity and zero reflow. The cold-visit downside of optional (no web font) only hits the rare first session. So optional is often ideal for app UI, more so than for content sites with many first-time visitors.
Does using this tool send my brand fonts anywhere?
No. It is generative and text-only — there is no upload, no font parsing, and the result badge reads 0 bytes uploaded. It formats an explainer and an @font-face skeleton in your browser. To actually self-host brand fonts privately, see the Google Fonts CSS generator and font-face generator.
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.