How to overwrite or disable the 'Nunito Sans' font in Docs in 7.0 (beta) #21109

MartinaMilisic · 2023-02-15T18:21:12Z

MartinaMilisic
Feb 15, 2023

Hi!

I'm building a ui lib with Storybook, Vite, React, Typescript and Tailwindcss, and having some trouble showing our custom font in the Docs in Storybook. I'm getting the right font (Boing) in the stories, but not in the Docs where 'Nunito Sans' seems to take precedence over 'Boing'. Why is that, and how can I get the docs to show the right font (Boing)?

Am I missing something? Thanks!

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
	addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
	framework: {
		name: '@storybook/react-vite',
		options: {}
	},
	docs: {
		autodocs: 'tag'
	},
	staticDirs: ['../src/assets'] //👈 Configures the static asset folder in Storybook
}
export default config

.storybook/preview.ts

import "../src/index.css"

export const parameters = {
	actions: { argTypesRegex: "^on[A-Z].*" },
	controls: {
		matchers: {
			color: /(background|color)$/i,
			date: /Date$/,
		},
	},
}

src/tailwind-entry.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Primary font - Boing */
@font-face {
	font-family: 'Boing';
	src: url('./assets/typography/boing/Boing-RegularWEB.woff') format('woff'),
		url('./assets/typography/boing/Boing-RegularWEB.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Boing';
	src: url('./assets/typography/boing/Boing-SemiboldWEB.woff') format('woff'),
		url('./assets/typography/boing/Boing-SemiboldWEB.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Boing';
	src: url('./assets/typography/boing/Boing-BoldWEB.woff') format('woff'),
		url('./assets/typography/boing/Boing-BoldWEB.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}

@layer base {
	html {
		@apply font-primary;
	}
}

This is the Docs where Nunito Sans is used:

And this is the story where Boing is used:

Answered by JReinhold

Nov 29, 2023

There could be a number of reasons for this, but it might be because of this line:

@layer base {
	html {
		@apply font-primary;
	}
}

The wanted fonts are applied in a CSS layer, which will have a lower specificity than Storybook's fonts because they are unlayered. Unlayered styles always takes priority over layered styles, even though we've done a lot to give those style very low specificity (using :where).

A fix here would be to apply the font unlayered in preview-head.html.

View full answer

JoJk0 · 2023-03-14T15:35:38Z

JoJk0
Mar 14, 2023

I'm getting the warning that it's not used and upon investigation I found preloading the font inside iframe's <head>. How to remove these font entries?

2 replies

hoonweiting May 19, 2023

Hey, I think this warning was fixed in #21599 but even then, I would still like a way to completely remove Nunito Sans from the <head>.

polRk Nov 23, 2023

Me too. I drop it out after build complete

Fabricevladimir · 2023-09-20T15:17:15Z

Fabricevladimir
Sep 20, 2023

@MartinaMilisic, did you ever manage to get this to work?

1 reply

MartinaMilisic Sep 22, 2023
Author

Hi! Actually, I forgot all about it. Checking it now, it seems like the right font is loaded. Unfortunately I don't know what fixed it :/

JReinhold · 2023-11-29T12:34:16Z

JReinhold
Nov 29, 2023
Maintainer

There could be a number of reasons for this, but it might be because of this line:

@layer base {
	html {
		@apply font-primary;
	}
}

The wanted fonts are applied in a CSS layer, which will have a lower specificity than Storybook's fonts because they are unlayered. Unlayered styles always takes priority over layered styles, even though we've done a lot to give those style very low specificity (using :where).

A fix here would be to apply the font unlayered in preview-head.html.

1 reply

MartinaMilisic Feb 15, 2024
Author

Sorry for a really late response! Thank's for the help :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to overwrite or disable the 'Nunito Sans' font in Docs in 7.0 (beta) #21109

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to overwrite or disable the 'Nunito Sans' font in Docs in 7.0 (beta) #21109

Uh oh!

MartinaMilisic Feb 15, 2023

Replies: 3 comments · 4 replies

Uh oh!

JoJk0 Mar 14, 2023

Uh oh!

hoonweiting May 19, 2023

Uh oh!

polRk Nov 23, 2023

Uh oh!

Fabricevladimir Sep 20, 2023

Uh oh!

MartinaMilisic Sep 22, 2023 Author

Uh oh!

JReinhold Nov 29, 2023 Maintainer

Uh oh!

MartinaMilisic Feb 15, 2024 Author

MartinaMilisic
Feb 15, 2023

Replies: 3 comments 4 replies

JoJk0
Mar 14, 2023

Fabricevladimir
Sep 20, 2023

MartinaMilisic Sep 22, 2023
Author

JReinhold
Nov 29, 2023
Maintainer

MartinaMilisic Feb 15, 2024
Author