From 114fe88afdce0026f2c39b916726d86841099878 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sat, 25 Apr 2026 20:16:15 -0400 Subject: [PATCH 01/13] Add Enhance Fonts As They Load pattern Closes #3 Co-Authored-By: Claude Opus 4.7 (1M context) --- src/assets/enhance_fonts_thumbnail.svg | 22 ++++++ src/patterns/enhance_fonts_as_they_load.md | 85 ++++++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 src/assets/enhance_fonts_thumbnail.svg create mode 100644 src/patterns/enhance_fonts_as_they_load.md diff --git a/src/assets/enhance_fonts_thumbnail.svg b/src/assets/enhance_fonts_thumbnail.svg new file mode 100644 index 0000000..16e49ce --- /dev/null +++ b/src/assets/enhance_fonts_thumbnail.svg @@ -0,0 +1,22 @@ + + + System first, custom later + + + Headline + readable system text + while custom fonts load + fallback (system) + + + + + + + + Headline + readable system text + while custom fonts load + custom (loaded) + + diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md new file mode 100644 index 0000000..3271bee --- /dev/null +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -0,0 +1,85 @@ +--- +layout: article.njk +title: Enhance Fonts As They Load +tags: pattern +thumbnail: /assets/enhance_fonts_thumbnail.svg +og_image: /assets/speed_patterns_og_image.jpg +order: 6 +--- + +Custom web fonts are a powerful brand and design tool, but they cost the user time. A font file has to be downloaded, parsed and applied before any text styled with it can be rendered. Until then, the browser must decide what to do — and the wrong default ruins the reading experience. + + + +## The Problem: FOIT and FOUT + +Browsers have historically picked between two unpleasant defaults: + +- **FOIT — Flash of Invisible Text.** The browser hides text styled with a custom font until the font finishes loading. The user sees a layout with empty holes where the words should be. On a slow connection, the page can be visually "loaded" for several seconds with no readable content. +- **FOUT — Flash of Unstyled Text.** The browser uses a fallback font immediately and swaps to the custom font when it loads. Text is readable from the first paint, but the swap can shift layout and feel jarring. + +Pure FOIT is the worse failure mode: the user can't even start reading. But a careless FOUT — a fallback font with very different metrics — is also painful. + +## Solution + +Treat custom fonts as a progressive enhancement, not a render blocker. Show legible fallback text from the first paint, then upgrade to the branded font when it arrives. Choose the fallback so the swap is as imperceptible as possible. + +### 1. Use `font-display: swap` (or `optional`) + +The CSS `font-display` descriptor tells the browser how to behave while the custom font loads: + +```css +@font-face { + font-family: "BrandSans"; + src: url("/fonts/BrandSans.woff2") format("woff2"); + font-display: swap; +} +``` + +- `swap` — show fallback immediately, replace with custom font when ready. Best for branded text where the custom font is important. +- `optional` — show fallback immediately, only use the custom font if it arrives almost instantly (otherwise stick with the fallback). Best for users on slow connections, since it eliminates layout shift after the first frame. +- `fallback` — a compromise between the two. + +Avoid the default (`auto`/`block`), which produces FOIT. + +### 2. Match fallback metrics to the custom font + +When the swap happens, lines may rewrap, headings may shift, and Cumulative Layout Shift increases. Modern CSS makes this almost solvable: + +```css +@font-face { + font-family: "BrandSans"; + src: url("/fonts/BrandSans.woff2") format("woff2"); + font-display: swap; + size-adjust: 102%; + ascent-override: 95%; + descent-override: 22%; + line-gap-override: 0%; +} +``` + +Tools like [Fontaine](https://github.com/unjs/fontaine) and Google's [Font Style Matcher](https://meowni.ca/font-style-matcher/) help find values that make a system fallback nearly indistinguishable in metrics from your branded font. + +### 3. Prioritize the right fonts + +Custom fonts are not free, even when handled well. Consider: + +- **Self-host** rather than relying on third-party font CDNs — this eliminates an extra DNS lookup and connection. +- **Preload critical fonts** with `` so the browser fetches them before discovering them in CSS. +- **Subset your fonts** to only the characters and weights you actually use. +- **Use `woff2`** — it's the smallest format and supported everywhere. + +## Why This Works + +Reading begins with the first piece of legible text. By showing fallback text immediately, you let the user start reading at first paint instead of waiting for a network round-trip. The brand fidelity arrives a moment later — at a cost of a small, near-invisible re-render rather than a blank page. + +## Related Patterns + +- [Fast Start](/patterns/fast_start/) — fonts are one of the most common blockers of first contentful paint. +- [Immutable Layout](/patterns/immutable_layout/) — well-tuned fallback metrics keep the swap from causing layout shift. + +## Resources + +- [`font-display` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) +- [Font Style Matcher](https://meowni.ca/font-style-matcher/) by Monica Dinculescu +- [Improved font fallbacks (web.dev)](https://web.dev/articles/css-size-adjust) From a51c5ce672d2a766020256cf6134e821d899c6b9 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 12:24:00 -0400 Subject: [PATCH 02/13] Move technical implementation details to the end of the article --- src/patterns/enhance_fonts_as_they_load.md | 47 +++++++++++++--------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md index 3271bee..0c87c23 100644 --- a/src/patterns/enhance_fonts_as_they_load.md +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -24,7 +24,30 @@ Pure FOIT is the worse failure mode: the user can't even start reading. But a ca Treat custom fonts as a progressive enhancement, not a render blocker. Show legible fallback text from the first paint, then upgrade to the branded font when it arrives. Choose the fallback so the swap is as imperceptible as possible. -### 1. Use `font-display: swap` (or `optional`) +The strategy has three parts: + +1. **Show fallback text immediately.** Configure each web font so the browser uses a system fallback while the custom font downloads, instead of hiding the text. +2. **Match fallback metrics to the custom font.** Pick a system fallback whose size, ascent, descent and line-height align closely with the branded font, so the swap doesn't shift layout. +3. **Prioritize which fonts get loaded urgently.** Most pages don't need every weight and style up front. Subset, preload and self-host only what the first view actually needs. + +The first piece of legible text is what lets the user start reading. By showing fallback text immediately, you let reading begin at first paint instead of after a network round-trip. The brand fidelity arrives a moment later — at a cost of a small, near-invisible re-render rather than a blank page. + +## Guidelines + +- **Don't block the first paint on font network requests.** Fallback text should always be visible immediately. +- **Test with a slow network throttle.** FOIT is invisible on a fast connection. The pattern is built for the user on the slow one. +- **Audit your font weights.** Each weight is a separate download. Many sites ship four or five weights and use two. +- **Subset to what you actually use.** Latin-only subsets are dramatically smaller than full Unicode files; per-page subsets are smaller still. +- **Self-host the critical fonts.** Third-party font CDNs add a DNS lookup, an extra connection and a privacy consideration. + +## Related Patterns + +- [Fast Start](/patterns/fast_start/) — fonts are one of the most common blockers of first contentful paint. +- [Immutable Layout](/patterns/immutable_layout/) — well-tuned fallback metrics keep the swap from causing layout shift. + +## Technical Implementation + +### Use `font-display` The CSS `font-display` descriptor tells the browser how to behave while the custom font loads: @@ -42,7 +65,7 @@ The CSS `font-display` descriptor tells the browser how to behave while the cust Avoid the default (`auto`/`block`), which produces FOIT. -### 2. Match fallback metrics to the custom font +### Match fallback metrics When the swap happens, lines may rewrap, headings may shift, and Cumulative Layout Shift increases. Modern CSS makes this almost solvable: @@ -60,23 +83,11 @@ When the swap happens, lines may rewrap, headings may shift, and Cumulative Layo Tools like [Fontaine](https://github.com/unjs/fontaine) and Google's [Font Style Matcher](https://meowni.ca/font-style-matcher/) help find values that make a system fallback nearly indistinguishable in metrics from your branded font. -### 3. Prioritize the right fonts - -Custom fonts are not free, even when handled well. Consider: - -- **Self-host** rather than relying on third-party font CDNs — this eliminates an extra DNS lookup and connection. -- **Preload critical fonts** with `` so the browser fetches them before discovering them in CSS. -- **Subset your fonts** to only the characters and weights you actually use. -- **Use `woff2`** — it's the smallest format and supported everywhere. - -## Why This Works - -Reading begins with the first piece of legible text. By showing fallback text immediately, you let the user start reading at first paint instead of waiting for a network round-trip. The brand fidelity arrives a moment later — at a cost of a small, near-invisible re-render rather than a blank page. +### Preload and use modern formats -## Related Patterns - -- [Fast Start](/patterns/fast_start/) — fonts are one of the most common blockers of first contentful paint. -- [Immutable Layout](/patterns/immutable_layout/) — well-tuned fallback metrics keep the swap from causing layout shift. +- Preload critical fonts with `` so the browser fetches them before discovering them in CSS. +- Use `woff2` — it's the smallest format and supported everywhere. +- Subset to only the characters and weights you actually use. ## Resources From dbd12268713adeb7233c19ed9b9e51721bd01b77 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 12:35:50 -0400 Subject: [PATCH 03/13] Drop trailing periods from list items --- src/patterns/enhance_fonts_as_they_load.md | 36 +++++++++++----------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md index 0c87c23..ad630c1 100644 --- a/src/patterns/enhance_fonts_as_they_load.md +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -15,8 +15,8 @@ Custom web fonts are a powerful brand and design tool, but they cost the user ti Browsers have historically picked between two unpleasant defaults: -- **FOIT — Flash of Invisible Text.** The browser hides text styled with a custom font until the font finishes loading. The user sees a layout with empty holes where the words should be. On a slow connection, the page can be visually "loaded" for several seconds with no readable content. -- **FOUT — Flash of Unstyled Text.** The browser uses a fallback font immediately and swaps to the custom font when it loads. Text is readable from the first paint, but the swap can shift layout and feel jarring. +- **FOIT — Flash of Invisible Text.** The browser hides text styled with a custom font until the font finishes loading. The user sees a layout with empty holes where the words should be. On a slow connection, the page can be visually "loaded" for several seconds with no readable content +- **FOUT — Flash of Unstyled Text.** The browser uses a fallback font immediately and swaps to the custom font when it loads. Text is readable from the first paint, but the swap can shift layout and feel jarring Pure FOIT is the worse failure mode: the user can't even start reading. But a careless FOUT — a fallback font with very different metrics — is also painful. @@ -26,24 +26,24 @@ Treat custom fonts as a progressive enhancement, not a render blocker. Show legi The strategy has three parts: -1. **Show fallback text immediately.** Configure each web font so the browser uses a system fallback while the custom font downloads, instead of hiding the text. -2. **Match fallback metrics to the custom font.** Pick a system fallback whose size, ascent, descent and line-height align closely with the branded font, so the swap doesn't shift layout. -3. **Prioritize which fonts get loaded urgently.** Most pages don't need every weight and style up front. Subset, preload and self-host only what the first view actually needs. +1. **Show fallback text immediately.** Configure each web font so the browser uses a system fallback while the custom font downloads, instead of hiding the text +2. **Match fallback metrics to the custom font.** Pick a system fallback whose size, ascent, descent and line-height align closely with the branded font, so the swap doesn't shift layout +3. **Prioritize which fonts get loaded urgently.** Most pages don't need every weight and style up front. Subset, preload and self-host only what the first view actually needs The first piece of legible text is what lets the user start reading. By showing fallback text immediately, you let reading begin at first paint instead of after a network round-trip. The brand fidelity arrives a moment later — at a cost of a small, near-invisible re-render rather than a blank page. ## Guidelines -- **Don't block the first paint on font network requests.** Fallback text should always be visible immediately. -- **Test with a slow network throttle.** FOIT is invisible on a fast connection. The pattern is built for the user on the slow one. -- **Audit your font weights.** Each weight is a separate download. Many sites ship four or five weights and use two. -- **Subset to what you actually use.** Latin-only subsets are dramatically smaller than full Unicode files; per-page subsets are smaller still. -- **Self-host the critical fonts.** Third-party font CDNs add a DNS lookup, an extra connection and a privacy consideration. +- **Don't block the first paint on font network requests.** Fallback text should always be visible immediately +- **Test with a slow network throttle.** FOIT is invisible on a fast connection. The pattern is built for the user on the slow one +- **Audit your font weights.** Each weight is a separate download. Many sites ship four or five weights and use two +- **Subset to what you actually use.** Latin-only subsets are dramatically smaller than full Unicode files; per-page subsets are smaller still +- **Self-host the critical fonts.** Third-party font CDNs add a DNS lookup, an extra connection and a privacy consideration ## Related Patterns -- [Fast Start](/patterns/fast_start/) — fonts are one of the most common blockers of first contentful paint. -- [Immutable Layout](/patterns/immutable_layout/) — well-tuned fallback metrics keep the swap from causing layout shift. +- [Fast Start](/patterns/fast_start/) — fonts are one of the most common blockers of first contentful paint +- [Immutable Layout](/patterns/immutable_layout/) — well-tuned fallback metrics keep the swap from causing layout shift ## Technical Implementation @@ -59,9 +59,9 @@ The CSS `font-display` descriptor tells the browser how to behave while the cust } ``` -- `swap` — show fallback immediately, replace with custom font when ready. Best for branded text where the custom font is important. -- `optional` — show fallback immediately, only use the custom font if it arrives almost instantly (otherwise stick with the fallback). Best for users on slow connections, since it eliminates layout shift after the first frame. -- `fallback` — a compromise between the two. +- `swap` — show fallback immediately, replace with custom font when ready. Best for branded text where the custom font is important +- `optional` — show fallback immediately, only use the custom font if it arrives almost instantly (otherwise stick with the fallback). Best for users on slow connections, since it eliminates layout shift after the first frame +- `fallback` — a compromise between the two Avoid the default (`auto`/`block`), which produces FOIT. @@ -85,9 +85,9 @@ Tools like [Fontaine](https://github.com/unjs/fontaine) and Google's [Font Style ### Preload and use modern formats -- Preload critical fonts with `` so the browser fetches them before discovering them in CSS. -- Use `woff2` — it's the smallest format and supported everywhere. -- Subset to only the characters and weights you actually use. +- Preload critical fonts with `` so the browser fetches them before discovering them in CSS +- Use `woff2` — it's the smallest format and supported everywhere +- Subset to only the characters and weights you actually use ## Resources From a7c692a9d56481793099c2492237a44d7ebcb9b0 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:11:34 -0400 Subject: [PATCH 04/13] Redraw thumbnail to follow canonical diagram theme --- src/assets/enhance_fonts_thumbnail.svg | 34 +++++++++++++------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/assets/enhance_fonts_thumbnail.svg b/src/assets/enhance_fonts_thumbnail.svg index 16e49ce..386e79c 100644 --- a/src/assets/enhance_fonts_thumbnail.svg +++ b/src/assets/enhance_fonts_thumbnail.svg @@ -1,22 +1,22 @@ - - System first, custom later - - - Headline - readable system text - while custom fonts load - fallback (system) + + System first, custom later + + + Headline + readable system text + while custom fonts load + fallback (system) - - - + + - - - Headline - readable system text - while custom fonts load - custom (loaded) + + + + Headline + readable system text + while custom fonts load + custom (loaded) From 2cd100d6728080bb3488992c3f24938ed74a99ca Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:14:47 -0400 Subject: [PATCH 05/13] Embed thumbnail illustration in Solution section --- src/patterns/enhance_fonts_as_they_load.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md index ad630c1..58157d5 100644 --- a/src/patterns/enhance_fonts_as_they_load.md +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -22,6 +22,11 @@ Pure FOIT is the worse failure mode: the user can't even start reading. But a ca ## Solution +
+
Fallback text is legible from the first paint; the branded font swaps in once it loads, without leaving the user waiting on a blank page.
+Two text panels side by side: the left in a system sans-serif labeled 'fallback (system)', the right in a serif italic labeled 'custom (loaded)' +
+ Treat custom fonts as a progressive enhancement, not a render blocker. Show legible fallback text from the first paint, then upgrade to the branded font when it arrives. Choose the fallback so the swap is as imperceptible as possible. The strategy has three parts: From 53b74d8fdc06042ccd8739f97bcf2b5081bbc5b4 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:25:08 -0400 Subject: [PATCH 06/13] Move SVG title text to figcaption; description becomes paragraph --- src/assets/enhance_fonts_thumbnail.svg | 3 +-- src/patterns/enhance_fonts_as_they_load.md | 4 +++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/assets/enhance_fonts_thumbnail.svg b/src/assets/enhance_fonts_thumbnail.svg index 386e79c..40dc93a 100644 --- a/src/assets/enhance_fonts_thumbnail.svg +++ b/src/assets/enhance_fonts_thumbnail.svg @@ -1,6 +1,5 @@ - + - System first, custom later Headline diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md index 58157d5..6990c55 100644 --- a/src/patterns/enhance_fonts_as_they_load.md +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -22,8 +22,10 @@ Pure FOIT is the worse failure mode: the user can't even start reading. But a ca ## Solution +Fallback text is legible from the first paint; the branded font swaps in once it loads, without leaving the user waiting on a blank page. +
-
Fallback text is legible from the first paint; the branded font swaps in once it loads, without leaving the user waiting on a blank page.
+
System first, custom later
Two text panels side by side: the left in a system sans-serif labeled 'fallback (system)', the right in a serif italic labeled 'custom (loaded)' From 9ab300d8ccd1865589b753d83df85c6dac0556d7 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:35:41 -0400 Subject: [PATCH 07/13] Move figcaption below the image --- src/patterns/enhance_fonts_as_they_load.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md index 6990c55..850a583 100644 --- a/src/patterns/enhance_fonts_as_they_load.md +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -25,8 +25,8 @@ Pure FOIT is the worse failure mode: the user can't even start reading. But a ca Fallback text is legible from the first paint; the branded font swaps in once it loads, without leaving the user waiting on a blank page.
-
System first, custom later
Two text panels side by side: the left in a system sans-serif labeled 'fallback (system)', the right in a serif italic labeled 'custom (loaded)' +
System first, custom later
Treat custom fonts as a progressive enhancement, not a render blocker. Show legible fallback text from the first paint, then upgrade to the branded font when it arrives. Choose the fallback so the swap is as imperceptible as possible. From 2e66600c932881696b0952ea43820d7ca1c3a07b Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:39:30 -0400 Subject: [PATCH 08/13] Credit Font Style Matcher to its author Monica Dinculescu --- src/patterns/enhance_fonts_as_they_load.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md index 850a583..58aa9a8 100644 --- a/src/patterns/enhance_fonts_as_they_load.md +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -88,7 +88,7 @@ When the swap happens, lines may rewrap, headings may shift, and Cumulative Layo } ``` -Tools like [Fontaine](https://github.com/unjs/fontaine) and Google's [Font Style Matcher](https://meowni.ca/font-style-matcher/) help find values that make a system fallback nearly indistinguishable in metrics from your branded font. +Tools like [Fontaine](https://github.com/unjs/fontaine) and Monica Dinculescu's [Font Style Matcher](https://meowni.ca/font-style-matcher/) help find values that make a system fallback nearly indistinguishable in metrics from your branded font. ### Preload and use modern formats @@ -99,5 +99,5 @@ Tools like [Fontaine](https://github.com/unjs/fontaine) and Google's [Font Style ## Resources - [`font-display` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) -- [Font Style Matcher](https://meowni.ca/font-style-matcher/) by Monica Dinculescu +- [Font Style Matcher](https://meowni.ca/font-style-matcher/) by [Monica Dinculescu](https://meowni.ca/) - [Improved font fallbacks (web.dev)](https://web.dev/articles/css-size-adjust) From 48ee77d29641b54e4e319c8d31b37d2a856b8a80 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 13:50:36 -0400 Subject: [PATCH 09/13] Shorten arrow so its tip clears the right panel --- src/assets/enhance_fonts_thumbnail.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/enhance_fonts_thumbnail.svg b/src/assets/enhance_fonts_thumbnail.svg index 40dc93a..5d24452 100644 --- a/src/assets/enhance_fonts_thumbnail.svg +++ b/src/assets/enhance_fonts_thumbnail.svg @@ -8,9 +8,9 @@ fallback (system) - + - + Headline From 93bb3aee2a9d36578f3b94ebc862456b5a394282 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 14:01:40 -0400 Subject: [PATCH 10/13] Use white-with-border content boxes (drop yellow/orange fills) --- src/assets/enhance_fonts_thumbnail.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/enhance_fonts_thumbnail.svg b/src/assets/enhance_fonts_thumbnail.svg index 5d24452..b166e05 100644 --- a/src/assets/enhance_fonts_thumbnail.svg +++ b/src/assets/enhance_fonts_thumbnail.svg @@ -1,7 +1,7 @@ - + Headline readable system text while custom fonts load @@ -12,7 +12,7 @@ - + Headline readable system text while custom fonts load From a0af4ef17ac32aafaa1b049299c61e473fe08f08 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 14:09:18 -0400 Subject: [PATCH 11/13] Increase illustration size by 10% (400 -> 440) --- src/patterns/enhance_fonts_as_they_load.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md index 58aa9a8..3e93cce 100644 --- a/src/patterns/enhance_fonts_as_they_load.md +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -25,7 +25,7 @@ Pure FOIT is the worse failure mode: the user can't even start reading. But a ca Fallback text is legible from the first paint; the branded font swaps in once it loads, without leaving the user waiting on a blank page.
-
Two text panels side by side: the left in a system sans-serif labeled 'fallback (system)', the right in a serif italic labeled 'custom (loaded)' +Two text panels side by side: the left in a system sans-serif labeled 'fallback (system)', the right in a serif italic labeled 'custom (loaded)'
System first, custom later
From beeeaad92326ac58927847bd41b8db4f0700657d Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 20:28:58 -0400 Subject: [PATCH 12/13] Add author and creation date to Enhance Fonts As They Load Author taken from the original issue (#3) creator; date is the issue creation date. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/patterns/enhance_fonts_as_they_load.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md index 3e93cce..9418a06 100644 --- a/src/patterns/enhance_fonts_as_they_load.md +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -5,6 +5,10 @@ tags: pattern thumbnail: /assets/enhance_fonts_thumbnail.svg og_image: /assets/speed_patterns_og_image.jpg order: 6 +date: 2017-12-04 +authors: + - name: Sergey Chernyshev + url: https://www.sergeychernyshev.com/ --- Custom web fonts are a powerful brand and design tool, but they cost the user time. A font file has to be downloaded, parsed and applied before any text styled with it can be rendered. Until then, the browser must decide what to do — and the wrong default ruins the reading experience. From f15e0638f50438e55d0f6d421950f126ce7554e8 Mon Sep 17 00:00:00 2001 From: Sergey Chernyshev Date: Sun, 26 Apr 2026 20:41:05 -0400 Subject: [PATCH 13/13] Mark Enhance Fonts As They Load as AI-assisted Co-Authored-By: Claude Opus 4.7 (1M context) --- src/patterns/enhance_fonts_as_they_load.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/patterns/enhance_fonts_as_they_load.md b/src/patterns/enhance_fonts_as_they_load.md index 9418a06..7c2680e 100644 --- a/src/patterns/enhance_fonts_as_they_load.md +++ b/src/patterns/enhance_fonts_as_they_load.md @@ -5,6 +5,7 @@ tags: pattern thumbnail: /assets/enhance_fonts_thumbnail.svg og_image: /assets/speed_patterns_og_image.jpg order: 6 +ai_assisted: true date: 2017-12-04 authors: - name: Sergey Chernyshev