search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.94k stars 9.21k forks source link

Storybook Theming: loading custom Roboto or Ciutadella font not loading #12950

Open eendkonijn opened 3 years ago

eendkonijn commented 3 years ago

Hello, I am trying to customize the Storybook UI. Customization works, but my custom font won't seem to load. Am I forgetting something? I don't have a reproducible repo, but I followed the steps on this page. This is how my theming file looks:

storybookCustomTheme.js:

import { create } from "@storybook/theming/create"; import logo from "../assets/images/storybook-icon.png";

export default create({ base: "light", colorPrimary: " #aa418c", colorSecondary: "#00526e",

// UI
appBg: "white",
appContentBg: "white",
appBorderColor: "grey",
appBorderRadius: 4,

// Typography
fontBase: '"Roboto", sans-serif',
fontCode: "monospace",

// Text colors
textColor: "black",
textInverseColor: "white",

// Toolbar default and active colors
barTextColor: "#343434",
barSelectedColor: "#377f95",
barBg: "white",

// Form colors
inputBg: "white",
inputBorder: "#00526e",
inputTextColor: "black",
inputBorderRadius: 4,

brandTitle: "BrandTitle",
brandUrl: "here's the brandurl",
brandImage: logo,

});`

As you can see it falls back to Helvetica:

afbeelding

Versions:

eendkonijn commented 3 years ago

Does anyone have an idea what might be the happening here?

eendkonijn commented 3 years ago

Still looking for support on this one

scottvincent commented 3 years ago

Did you create a manager-head.html file and put the google font link inside it?

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

eendkonijn commented 3 years ago

Thank you scottvincent, I will try but I have the fonts locally and load them in .storybook/storybook.scss:


@font-face {
    font-family: "Ciutadella";
    src: url("../assets/fonts/Ciutadella/35A006_0_0.woff2") format("woff2"),
        url("../assets/fonts/Ciutadella/35A006_0_0.woff") format("woff");
    font-weight: $font-weight-light;
    font-style: normal;
}

@font-face {
    font-family: "Ciutadella";
    src: url("../assets/fonts/Ciutadella/35A006_2_0.woff2") format("woff2"),
        url("../assets/fonts/Ciutadella/35A006_2_0.woff") format("woff");
    font-weight: $font-weight-regular;
    font-style: normal;
}

@font-face {
    font-family: "Ciutadella";
    src: url("../assets/fonts/Ciutadella/CiutadellaRounded-SmBd.woff2")
            format("woff2"),
        url("../assets/fonts/Ciutadella/CiutadellaRounded-SmBd.woff")
            format("woff");
    font-weight: $font-weight-semibold;
    font-style: normal;
}

@font-face {
    font-family: "Ciutadella";
    src: url("../assets/fonts/Ciutadella/35A006_1_0.woff2") format("woff2"),
        url("../assets/fonts/Ciutadella/35A006_1_0.woff") format("woff");
    font-weight: $font-weight-bold;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../assets/fonts/Roboto/roboto-v18-latin-300.woff2")
            format("woff2"),
        url("../assets/fonts/Roboto/roboto-v18-latin-300.woff") format("woff");
    font-weight: $font-weight-light;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../assets/fonts/Roboto/roboto-v18-latin-regular.woff2")
            format("woff2"),
        url("../assets/fonts/Roboto/roboto-v18-latin-regular.woff")
            format("woff");
    font-weight: $font-weight-regular;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../assets/fonts/Roboto/roboto-v18-latin-500.woff2")
            format("woff2"),
        url("../assets/fonts/Roboto/roboto-v18-latin-500.woff") format("woff");
    font-weight: $font-weight-medium;
    font-style: normal;
}
stale[bot] commented 3 years ago

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

KenACollins commented 3 years ago

I am on Storybook 6.2.1 and I am finding that the Storybook theming fontBase property set to the 'Roboto' font works in the left sidebar and the Canvas tab (including Controls panel content) and for the styling of the font of the Docs tab itself but it does not carry over to the content on the Docs page when using an MDX stories file. There, the crazy default values are in effect:

font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;

Seems like a bug with MDX.

FYI to @shilman and @jonniebigodes.

shilman commented 3 years ago

@KenACollins you've read this? https://storybook.js.org/docs/react/configure/theming#theming-docs

KenACollins commented 3 years ago

Hi @shilman ,

Ooooh!! Okay. Thank you for pointing this out. I did read that page, Mike, before posting my comment above, but obviously did not read it as carefully as I should have. I had the manager.js file reference my custom theme file, but did not realize that I needed to make the change in two places, the preview.js file too. It works! I have Roboto font everywhere now - sidebar, Canvas tab, Controls panel, Docs tab, and Docs MDX content. Okay, this issue no longer exists.

vctormb commented 2 years ago

Hi @shilman ,

Ooooh!! Okay. Thank you for pointing this out. I did read that page, Mike, before posting my comment above, but obviously did not read it as carefully as I should have. I had the manager.js file reference my custom theme file, but did not realize that I needed to make the change in two places, the preview.js file too. It works! I have Roboto font everywhere now - sidebar, Canvas tab, Controls panel, Docs tab, and Docs MDX content. Okay, this issue no longer exists.

How did you change the font-family on the Docs tab? My MDX is always getting the default font-family from Storybook 🤔

KenACollins commented 2 years ago

Hi Victor (@vctormb),

Sorry for the delay, I have been swamped at work so my only recourse was to log in a Saturday.

You configure your Storybook environment through a half dozen files that you create in the .storybook folder located in the root of your project. See screenshot below of the folder structure.

image

Some of these files may be created for you initially, but there is still configuration you will need to perform.

To answer your question, altering the font for both the Canvas and Docs tabs requires configuration in the preview-head.html file. Here is what mine looks like:

<!-- preview-head.html: Overrides content of preview IFRAME HTML page's <head> tag, affecting rendered component(s) below Canvas and Docs tabs. -->
<!-- Link tag that points to Roboto font resolves to src/assets/fonts/ folder based on start command defined with '-s src/assets' parameter in package.json. -->
<link rel="stylesheet" href="fonts/Roboto/Roboto.css">
<style>
    body {
        font-family: Roboto, sans-serif;
    }
</style>

Hope this helps. Let me know if you get stuck.

andreyna1808 commented 7 months ago

@KenACollins Thanks this works for me

brunobarretta commented 7 months ago

Hi @KenACollins, Thanks! it's helpful!