Updated font handling for admin-x settings

refs https://github.com/TryGhost/Team/issues/3151

- splits font loading between css files that are loaded locally for storybook/demo app vs the exported App
- uses local Inter font for exported App vs local asset for demo

ghost/admin-x-settings/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import '../src/styles/index.css';
+import '../src/styles/demo.css';
 import type { Preview } from "@storybook/react";
 
 const preview: Preview = {

ghost/admin-x-settings/src/main.tsx

@@ -1,4 +1,4 @@
-import './styles/index.css';
+import './styles/demo.css';
 import App from './App.tsx';
 import React from 'react';
 import ReactDOM from 'react-dom/client';

ghost/admin-x-settings/src/styles/demo.css

@@ -0,0 +1,63 @@
+@import './preflight.css';
+
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+/* Defaults */
+@layer base {
+    @font-face {
+        font-family: "Inter";
+        src: url("./src/assets/fonts/Inter.ttf") format("truetype-variations");
+        font-weight: 100 900;
+    }
+
+    body {
+        @apply font-sans text-black text-base leading-normal;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        @apply font-bold tracking-tight leading-tighter;
+    }
+
+    h1 {
+        @apply text-4xl leading-supertight;
+    }
+
+    h2 {
+        @apply text-3xl;
+    }
+
+    h3 {
+        @apply text-2xl;
+    }
+
+    h4 {
+        @apply text-xl;
+    }
+
+    h5 {
+        @apply text-lg leading-tight;
+    }
+
+    h6 {
+        @apply text-md leading-normal;
+    }
+}
+
+:root {
+    font-size: 62.5%;
+    line-height: 1.5;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+html, body, #root {
+    width: 100%;
+    height: 100%;
+}

ghost/admin-x-settings/src/styles/index.css

@@ -8,7 +8,7 @@
 @layer base {
     @font-face {
         font-family: "Inter";
-        src: url("./src/assets/fonts/Inter.ttf") format("truetype-variations");
+        src: local("Inter") format("truetype-variations");
         font-weight: 100 900;
     }