Merge pull request #26741 from storybookjs/docs_fix_styling

Docs: Update Styling and CSS
(cherry picked from commit 2cf5571)

docs/configure/styling-and-css.md

@@ -37,8 +37,7 @@ However, these files will not be subject to HMR, so you'll need to restart your
 
 <CodeSnippets
   paths={[
-    'common/storybook-preview-import-global-styles.js.mdx',
-    'common/storybook-preview-import-global-styles.ts.mdx',
+    'common/storybook-preview-head-import-global-styles.html.mdx',
   ]}
 />
 
@@ -138,7 +137,7 @@ To add global styles to your Storybook, you can add them to the `styles` array i
 Don't forget to also add your global styles to your `build-storybook` target in your `angular.json` file. This will ensure that your global styles are included in the static build of your Storybook as well.
 
 ```json
-  {
+{
   "storybook": {
     "builder": "@storybook/angular:start-storybook",
     "options": {
@@ -234,4 +233,3 @@ Starting with version 14.1.8, Nx uses the Storybook builder directly, which mean
 When Nx runs, it will load Storybook's configuration and styling based on [`storybook.browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
 
 </IfRenderer>
-

docs/snippets/common/storybook-preview-head-import-global-styles.html.mdx

@@ -0,0 +1,13 @@
+```html
+<!-- .storybook/preview-head.html -->
+
+<!-- Loads a font from a CDN -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+  rel="stylesheet"
+/>
+<!-- Load your CSS file -->
+<link rel="stylesheet" href="path/to/your/styles.css" />
+```