DEV Community

Using fonts in Storybook for Next.JS and Tailwind Projects

timreach on February 29, 2024

I'm pretty new to Storybook. I am so frustrated I haven't used it in projects earlier as developing components in isolation is incredible. However ...
Collapse
 
fpaghar profile image
Fatemeh Paghar

The distinction between Next.js and Storybook environments and the realization that the font loading issue was Storybook-specific is a valuable lesson. Your solution utilizing the preview-head.html in the .storybook directory, importing the font from Google Font's CDN, and defining the style tag to apply the font to the body element is a clever workaround.