Configure Storybook with Global Stylesheets and Fonts

[00:00] Most apps component libraries and design systems will have some type of global CSS even if it's just a reset like this. To add that reset to Storybook, open the Storybook preview module where we can simply import this. Import source assets [00:20] reset dot CSS. The import syntax that you use here is dependent on your module bundler. In this case, I'm using Vite, but webpack is also supported. We can ensure that this worked by adding something, egregious. Background color blue violet? It's ugly [00:40] but at least we know that our reset is getting loaded. Okay. Let's talk about fonts. Oftentimes if we load a font from a CDM like a Google Fonts, we get this HTML. So how can we add that into our storybook? Back to storybook, locate the storybook preview [01:00] module and add a preview dash head dot HTML. In this file, we can insert any HTML tags that we want into our document. Let's save that and restart our Storybook dev server. Now in any of our [01:20] CSS files we can use that font. Font family, enter. Now I know that these components have this defined in the CSS. This will vary depending on your components. However, I'm gonna change this font to enter so we can see the change.