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

[MartinaMilisic]

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:

[JoJk0]

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?

[hoonweiting]

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]

Me too. I drop it out after build complete

[Fabricevladimir]

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

[MartinaMilisic]

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]

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.

[MartinaMilisic]

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