Add webfonts for 5.0 redesign (#39868)

app/javascript/mastodon/components/_theme_playground/index.tsx

@@ -54,7 +54,13 @@ export const ThemePlayground: React.FC = () => {
           </button>
         </aside>
       </nav>
-      <main>Test 1 2 3</main>
+      <main>
+        <h1>Home</h1>
+        <p>Test 1 2 3</p>
+        <p>
+          This is a <strong>bold statement!</strong>
+        </p>
+      </main>
       <div className={classes.overlay}>Hello World</div>
     </div>
   );

app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss

@@ -1,17 +1,34 @@
 @use '@/styles/mastodon/mixins';
 
 .wrapper {
+  // Override global body font variable because Storybook
+  // doesn't have the `data-redesign` html attribute
+  --font-body: Inter, sans-serif;
+
   position: relative;
   display: grid;
   grid-template-columns: 250px 1fr;
   gap: var(--space-md);
   padding: var(--space-3xl);
+  font-family: Inter, sans-serif;
   font-size: var(--fs-lg);
   line-height: var(--lh-normal);
   overflow-wrap: break-word;
   color: var(--color-text-primary);
   background-color: var(--color-bg-blend);
 
+  h1 {
+    @include mixins.type-heading-lg;
+  }
+
+  p {
+    @include mixins.type-body;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
   * {
     min-width: 0;
   }