From a0fc69c4b0e06f76fe4592a7efd10a91e4fa0954 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 18 Oct 2024 11:43:24 +0100
Subject: [PATCH 1/2] Docs: Font loading adjustments

---
 src/content/snapshotOptions/font-loading.md | 29 +++++++--------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/content/snapshotOptions/font-loading.md b/src/content/snapshotOptions/font-loading.md
index 1e486490..395f0571 100644
--- a/src/content/snapshotOptions/font-loading.md
+++ b/src/content/snapshotOptions/font-loading.md
@@ -15,7 +15,7 @@ Unfortunately, this behavior can cause your story to render without the custom f
 
 Web font loading can vary between browsers, versions, and operating systems. Web-safe fonts are commonly installed by default on browsers and operating systems. We recommend you include a web-safe font in your font stack as a fallback in case your web font isn't available or doesn't load as expected.
 
-```css
+```css title="src/index.css"
 /* Fallback to "Courier New" for monospace fonts */
 
 code {
@@ -36,11 +36,9 @@ code {
 
 ## Solution A: Preload fonts
 
-We recommend that you ensure fonts are always loaded prior to rendering the story. Preload fonts in Storybook by specifying them in `./storybook/preview-head.html`.
-
-```js
-// ./storybook/preview-head.html
+We recommend that you always ensure fonts are loaded before your tests are executed. With Storybook, you can preload fonts by specifying them in [`./storybook/preview-head.html`](https://storybook.js.org/docs/configure/story-rendering#adding-to-head).
 
+```js title="./storybook/preview-head.html"
 <link
   rel="preload"
   href="path/to/font.woff2"
@@ -60,9 +58,7 @@ If your CSS has global `@font-face` declarations that point to a CDN, you may ne
 
 For example, you might have a font CDN referenced in your stylesheets like so.
 
-```css
-/* yourglobalstyles.css */
-
+```css title="src/index.css"
 @font-face {
   font-display: optional;
   font-family: "YourFont";
@@ -76,9 +72,7 @@ To serve the fonts statically, you first need to put your fonts in a static dire
 
 Next, create a `yourfontface.css` CSS inside your Storybook configuration directory (i.e., `.storybook`). We'll use it to reference the local path for your font in the `../public` directory.
 
-```css
-/* ./storybook/yourfontface.css */
-
+```css title="./storybook/yourfontface.css"
 @font-face {
   font-display: optional;
   font-family: "YourFont";
@@ -89,24 +83,19 @@ Next, create a `yourfontface.css` CSS inside your Storybook configuration direct
 }
 ```
 
-Reference the stylesheet in Storybook's `preview-head.html` configuration to load the font from the local path.
+Reference the stylesheet in Storybook's [`preview-head.html`](https://storybook.js.org/docs/configure/story-rendering#adding-to-head) configuration file to load the font from the local path.
 
-```js
-// ./storybook/preview-head.html
-
-// 👇 Add this
+```js title="./storybook/preview-head.html"
 <link rel="stylesheet" type="text/css" href="/yourfontface.css">
 ```
 
-This technique loads a local font file during development and testing in Storybook. Meanwhile your users still load the font from the CDN in production.
+This technique loads a local font file during development and testing in Storybook. Meanwhile, your users are still loading the font from the CDN in production.
 
 ## Solution C: Check fonts have loaded in a loader
 
 This alternate solution uses the browser's font load API and the [`isChromatic()`](/docs/ischromatic) helper function to verify that fonts load when in the Chromatic environment.
 
-```js
-// .storybook/preview.js
-
+```js title="./storybook/preview.js|ts"
 import isChromatic from "chromatic/isChromatic";
 
 // Use the document.fonts API to check if fonts have loaded

From 048235cb51b7ebf41f76e86ea158d621ba34dcf5 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 18 Oct 2024 11:46:51 +0100
Subject: [PATCH 2/2] Minor tweak

---
 src/content/snapshotOptions/font-loading.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/snapshotOptions/font-loading.md b/src/content/snapshotOptions/font-loading.md
index 395f0571..c3e26633 100644
--- a/src/content/snapshotOptions/font-loading.md
+++ b/src/content/snapshotOptions/font-loading.md
@@ -9,7 +9,7 @@ sidebar: { order: 2 }
 
 Browsers can decide to render HTML in multiple passes when custom fonts are used. They do this to speed up the time-to-first-meaningful-paint.
 
-Unfortunately, this behavior can cause your story to render without the custom font. Or worse, render inconsistently. That triggers font rendering changes that you have to accept again and again. Here are ways to prevent that.
+Unfortunately, this behavior can cause your tests to render without the custom font or, worse, render inconsistently. That triggers font rendering changes that you have to accept again and again. Here are ways to prevent that.
 
 ## Best practice: Fallback to web-safe fonts