Fix font loading in storybook (#11529)

Both Lato and the icon font were not loading correctly since the CSS
expects them to be available under a certain URL. This URL is available
in the core app, but not storybook. This commit makes sure the assets
load correctly in Storybook, giving us pretty icons and the right font.

Storybook assets cannot currently be loaded by merging directories,
so this fix makes sure files are loaded individually.

https://github.com/storybookjs/storybook/issues/18686

frontend/.storybook/SpotTheme.js

@@ -5,6 +5,6 @@ export default create({
 
   brandTitle: 'SPOT - Single Point Of Truth',
   brandUrl: '/',
-  brandImage: 'https://www.openproject.org/docs/development/design-system/logo_openproject_spot.png',
+  brandImage: '/assets/logo_openproject_spot.png',
   brandTarget: '_self',
 });

frontend/.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   stories: [
     "../src/**/*.stories.mdx",
@@ -22,6 +24,36 @@ module.exports = {
     // modernInlineRender: true,
   },
   staticDirs: [
-    { from: '../src/stories/assets', to: '/assets' },
-  ],
+    // Copy local static assets
+    '../src/stories/assets/logo_openproject.png',
+    '../src/stories/assets/logo_openproject_spot.png',
+    
+    // Copy font files to specific locations so the normal core SASS 
+    // will load the files correctly without having to use variables
+    '../src/assets/fonts/openproject_icon/openproject-icon-font.ttf',
+    '../src/assets/fonts/openproject_icon/openproject-icon-font.svg',
+    '../src/assets/fonts/openproject_icon/openproject-icon-font.eot',
+    '../src/assets/fonts/openproject_icon/openproject-icon-font.woff',
+    '../src/assets/fonts/openproject_icon/openproject-icon-font.woff2',
+
+    '../src/assets/fonts/lato/Lato-Regular.woff',
+    '../src/assets/fonts/lato/Lato-Regular.woff2',
+
+    '../src/assets/fonts/lato/Lato-Bold.woff',
+    '../src/assets/fonts/lato/Lato-Bold.woff2',
+
+    '../src/assets/fonts/lato/Lato-Light.woff',
+    '../src/assets/fonts/lato/Lato-Light.woff2',
+
+    '../src/assets/fonts/lato/Lato-Italic.woff',
+    '../src/assets/fonts/lato/Lato-Italic.woff2',
+
+    '../src/assets/fonts/lato/Lato-BoldItalic.woff',
+    '../src/assets/fonts/lato/Lato-BoldItalic.woff2',
+
+    '../src/assets/fonts/lato/Lato-LightItalic.woff',
+    '../src/assets/fonts/lato/Lato-LightItalic.woff2',
+  ].map((from) => ({
+    from, to: path.join('/assets/frontend/', path.basename(from)),
+  })),
 };