add the font for the storybook manager UI, add a reference to it in the template

Co-authored-by: Valentin Palkovic <valentin@chromatic.com>

code/lib/builder-manager/templates/template.ejs

@@ -12,6 +12,10 @@
       <link rel="icon" type="image/x-icon" href="./<%= favicon %>">
     <% } %>
 
+    <link rel="preload" href="./sb-manager-assets/nunitosans-regular.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="./sb-manager-assets/nunitosans-black.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="stylesheet" href="./sb-manager-assets/fonts.css" />
+
     <% if (typeof head !== 'undefined') { %> <%- head %> <% } %>
 
     <style>

code/lib/core-server/src/presets/common-preset.ts

@@ -13,14 +13,23 @@ import type {
   CoreConfig,
   Options,
   StorybookConfig,
+  PresetPropertyFn,
 } from '@storybook/types';
 import { loadCsf } from '@storybook/csf-tools';
-import { join } from 'path';
+import { dirname, join } from 'path';
 import { dedent } from 'ts-dedent';
 import { parseStaticDir } from '../utils/server-statics';
 
 const defaultFavicon = require.resolve('@storybook/core-server/public/favicon.svg');
 
+export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = []) => [
+  {
+    from: join(dirname(require.resolve('@storybook/manager/package.json')), 'static'),
+    to: '/sb-manager-assets',
+  },
+  ...values,
+];
+
 export const favicon = async (
   value: string,
   options: Pick<Options, 'presets' | 'configDir' | 'staticDir'>
@@ -28,17 +37,17 @@ export const favicon = async (
   if (value) {
     return value;
   }
-  const staticDirs = await options.presets.apply<StorybookConfig['staticDirs']>('staticDirs');
+  const staticDirsValue = await options.presets.apply<StorybookConfig['staticDirs']>('staticDirs');
 
-  const statics = staticDirs
+  const statics = staticDirsValue
-    ? staticDirs.map((dir) => (typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`))
+    ? staticDirsValue.map((dir) => (typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`))
     : options.staticDir;
 
   if (statics && statics.length > 0) {
     const lists = await Promise.all(
       statics.map(async (dir) => {
         const results = [];
-        const relativeDir = staticDirs
+        const relativeDir = staticDirsValue
           ? getDirectoryFromWorkingDir({
               configDir: options.configDir,
               workingDir: process.cwd(),

code/ui/manager/package.json

@@ -44,6 +44,7 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
+    "static/**/*",
     "README.md",
     "*.js",
     "*.d.ts"

code/ui/manager/static/fonts.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./nunitosans-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('./nunitosans-black.woff2') format('woff2');
+}