Merge pull request #584 from chromaui/docs_adjust_font_loading_polish

Docs adjust font loading polish

src/content/snapshotOptions/font-loading.md

@@ -9,13 +9,13 @@ 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
 
 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