Customizing font in Storybook

Get Help and Help Others Solutions
1

Hey, I used a custom font in my site and now I am trying to make it work on my storybook server but I am not sure if this is currently supported.

First of all, has anyone been able to do this before?

I am importing the font as a link from google fonts in the head of my index.html.

Wanted to do something similar with storybook and found this:

But from what I gathered from the docs and from the storybook config in the testing package this file in particular is not supported.

Do we want to add support for it?

2

Hi @aguscha333 I wonder if that is related to this issue about the TailwindCss styles not being used for scaffolds as well – (since it is using @apply in a stylesheet)? See: Storybook is not applying Tailwind CSS styles when working on components that use Redwood scaffold tailwind styles · Issue #4361 · redwoodjs/redwood · GitHub

If supporting the font help with that issue, too, it’d be amazing!

To me, it sounds like we should support it, but will ask others.

3

@aguscha333 I checked in with our Storybook contacts and they think that, yes, Redwood should try to support the preview head and body.

Is that something you might be able to help with and submit a PR?

4

I can try! I’ll keep that issue you mentioned in mind when testing

1 Like
5

Looping in @bitshift who’s been taking lead on a lot of Storybook next steps!

Thanks, all!

6

Hello @aguscha333!

You can customize the font used by Storybook. See this PR from the v1 website for an example. The short-end of it: you can add to the <head> via the storybook.config.js file. Here is a related page from Storybook’s documentation

This doesn’t make use of the dedicated preview-head.html, but should still make the font-family available to your styling.

2 Likes
7

This worked! Thanks :smile:

2 Likes
8

Thanks for posting this @realStandal was just about to link to this!

2 Likes
9

Thanks @realStandal !

To close the loop, here are docs on how to configure Storybook in Redwood​.

I’ll leave a modified version of the PR from @realStandal below so others can get the gist:

// web/config/storybook.config.js

module.exports = {
  // ...
  previewHead: (head) => (`
    ${head}
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  `);
};
4 Likes