Apply Inter font for modal elements in Storybook

2023-06-25 11:13:17 +02:00 · 2023-06-25 11:13:17 +02:00 · 784753cd40
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@ -0,0 +1,15 @@
+<style>
+  body {
+    /*
+      The <AppDecorator> in preview.tsx should properly set the Inter font as
+      the default font using next/font, but some components are rendered outside
+      of the decorator by being appended to the <body> using a React Portal.
+      Specifically, React Aria does this for modal elements like the <AppPicker>
+      popover. Thus, this is a manual workaround to apply the Inter font there
+      too. On the actual website, outside of Storybook, this should not be a
+      problem, as the font is applied directly to the <body> using next/font in
+      the root layout (src/app/layout.tsx).
+     */
+    font-family: Inter;
+  }
+</style>