Similar question but the same: How to remove default Storybook Canvas styles?
The default font fam used in Storybook is:
font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
But this is overriding a lot of my apps fonts as the dont is applied to a class at the element level. See the pic:
How can this be turned off?
(this is vue with buefy component lib)
You can add custom styling to every different element that storybook renders, in .storybook/preview.ts. You can apply an empty style like below (or your own defined style with your own font) and it will not load the custom generated styling.
import { styled } from '#storybook/theming';
const divEmpty = styled.div(({ theme }) => ({
}));
const pEmpty = styled.p(({ theme }) => ({
//example of custom font
fontFamily: "Arial"
}));
const spanEmpty = styled.span(({ theme }) => ({
}));
const inputEmpty = styled.input(({ theme }) => ({
}));
export const parameters = {
...
docs: {
components: {
p: pEmpty,
div: divEmpty,
span: spanEmpty,
input: inputEmpty
},
},
}
First off, you can't remove ALL of the styles of Storybook. Otherwise you'll have to design the sidebar and all the buttons yourself. Those styles in your screenshot are only applying to the docs generated by Storybook, not your own components. They're attached to class sbdocs. For example:
sbdocs-p instead of p,
sbdocs-h1 instead of h1
etc. If you want to override them, why not simply override them like this?
p, .sbdocs-p{
font-family:inherit;
}
h1, .sbdocs-h1{
font-family:inherit;
}
etc.
I have successful loaded in two custom font to my codebase that is using tailwind. My issue is that when I use a plugin to create a base set of styles for my HTML the custom font is ignored then is reverted to the back up.
This only happens when I use the theme directory callback in the plugin. If I hardcode the fontFamily name in there then it works correctly.
tailwind.config.js
/**
* Configuration
*/
module.exports = {
theme: {
fontFamily: {
display: ['New Grotesk', 'arial'],
body: ['Founders Grotesk', 'arial']
}
},
plugins: [
globalStyles,
],
}
Plugin
const globalStyles = ({ addBase, config }) => {
addBase({
'h1, h2, h3, h4, h5': {
marginBottom: config('theme.margin.2'),
lineHeight: config('theme.lineHeight.tight'),
fontFamily: config('theme.fontFamily.display')
},
});
}
If I swap out fontFamily: config('theme.fontFamily.display') for fontFamily: 'New Grotesk'. It works correctly but this defeats the purpose of using the config function.
I know this is a possible extending the #base scss but I would prefer to do it this way.
Here is a screenshot of the fontFamily being ignored by my browser
Your problem is the need to add double quotes in your font-family stack when using a font that has a space in the name:
// Won't work
fontFamily: {
display: ['New Grotesk', 'arial'],
}
// Add quotes 👍🏼:
fontFamily: {
display: ['"New Grotesk"', 'arial'],
}
Ref: https://tailwindcss.com/docs/font-family#font-families
I’ve added new font families in my tailwind.config.js file. These are available with the .font-sans class, but I would like to change the global font-family as well. The 'tailwindcss/base' import adds a generic sans-serif family on the html, body {} selector.
Is there a way to change this global font family in the config file, rather than just adding in a new style to undo it?
I’d like to keep the overall CSS to a minimum and not have to add extra CSS to undo styles I don’t need. I couldn’t see any option in the docs that would apply to this.
For me it worked to override 'sans', because that's whats being used by default.
module.exports = {
theme: {
fontFamily: {
sans: ['"PT Sans"', 'sans-serif']
}
},
}
(Note that theme.fontFamily is overriding the 3 defaults, so if you copy paste the above code you lose font-serif and font-mono)
But it would be weird to override 'sans' with something like a serif stack, so in those cases you can define the stack and apply it to the html/body tag:
<body class="font-serif"> <!-- Or whatever your named your font stack -->
More about tailwind font families
I use Inter font and this is what working for me after hours of trying a lot of suggestions and tutorials:
module.exports = {
important: true,
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: [
'./components/**/*.js',
'./pages/**/*.js'],
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
extend: {
fontFamily: {
sans: [
'"Inter"',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
},
},
},
variants: {},
plugins: [
require( 'tailwindcss' ),
require( 'precss' ),
require( 'autoprefixer' ),
],
};
When you install Tailwind CSS following the official guide, the default font-family that applies to the HTML element of your project corresponds to the font-sans utility class, as below (Preflight);
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
In order to modify the Tailwind Preflight configuration, you can make use of #layer to extend the base as below;
/*
* Override default font-family above
* with CSS properties for the .font-serif utility.
*/
#tailwind base;
#layer base {
html {
#apply font-serif;
}
}
#tailwind components;
#tailwind utilities;
Though global (as it applies to the root HTML element of the document), the approach described above overrides the font-family defined in Tailwind Preflight configuration but ensure it remains in your compiled CSS, when used.
Assuming you want to use "Segoe UI" with Roboto and sans-serif only as sans font-family applied to your HTML element in the same order, without override, make use of the snippet below;
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
sans: [
'"Segoe UI"',
'Roboto',
'sans-serif',
],
},
},
plugins: [],
}
In case you want your new newly defined sans font-family to be applied (still without override) but with Tailwind's as default fallback, modify your script as below;
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
sans: [
'"Segoe UI"',
'Roboto',
'sans-serif',
...fontFamily.sans,
],
},
},
plugins: [],
}
Please note: in the last scenario above, the font-family applied to the HTML element of your project could contain duplicate font listings, if already exiting in the CSS properties of Tailwind's .font-sans utility class (that is the case for the three fonts used in the example above).
Let's say you want to use IBM Plex Sans Variable as your custom sans font, with the regular Tailwind CSS .font-family sans, without override, make use of the snippet below, then import the font into your project;
// tailwind.config.js
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
sans: [
'"IBM Plex Sans"',
...fontFamily.sans,
],
},
},
plugins: [],
}
Remember: use the same font-family name as in your tailwind.config.js file as name for your custom font - here: "IBM Plex Sans".
This is the proper way to add a custom font with good fallbacks (in case the browser couldn't download the font, the site should still look pretty with the default font).
Put font file in your project folder.
Add font to Head section so that it loads in all pages:
<link
rel="preload"
href="/fonts/inter-var-latin.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
Mention font in tailwind global css file so that it applies to all pages:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
#font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: optional;
src: url(/fonts/inter-var-latin.woff2) format("woff2");
}
}
Tell tailwind to prioritize this font. in tailwind.config.js:
/* disable eslint errors if any */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ["Inter", ...defaultTheme.fontFamily.sans],
},
},
},
};
Vibe.
To verify that the custom font is loaded properly use WhatFont chrome ext or go to dev tools, inspect a text, and scroll to HTML CSS:
PS: You can see Tailwind custom font implementation on my (Next.js) site: https://github.com/GorvGoyl/Personal-Site-Gourav.io
This is what worked for me when I wanted my app to use Roboto font as a default sans font:
In tailwind.config.js:
const defaultTheme = require('tailwindcss/defaultTheme')
const fontFamily = defaultTheme.fontFamily;
fontFamily['sans'] = [
'Roboto', // <-- Roboto is a default sans font now
'system-ui',
// <-- you may provide more font fallbacks here
];
module.exports = {
purge: [],
theme: {
fontFamily: fontFamily, // <-- this is where the override is happening
extend: {},
},
variants: {},
plugins: [],
};
This override variant modifies only font-sans family and preserves font-serif and font-mono families.
I had a custom downloaded font, so I did it this way: Download a free font (eg BeautifulQueen.otf) and put it into your public/font folder. Go to your globals.css file where you have your tailwindcss css stuff (#tailwind base;#tailwind components;#tailwind utilities;) add this after it file /styles/globals.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
#font-face {
font-family: 'BeautifulQueen';
src: url('/font/BeautifulQueen.otf');
}
}
// rest of your css goes below
Now go to your tailwind.config.js file in your root folder file /tailwind.config.js
/** #type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
sans: ['BeautifulQueen', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
}
You only need the fontFamily and sans line. Sans is tailwind's default font name, you are overriding the first font to your custom font.
How it works: Tailwind config file sans: 'BeautifulQueen' links to your css #font-face name font-family: 'BeautifulQueen' and it uses your src source of your font file location. src: url('/font/BeautifulQueen.otf');
Note: in your globals.css file, remove any font-family that is being used (eg in Nextjs it auto create
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
You need to comment out or remove that font-family being referenced, eg below. If you dont remove it, you'll be using it and not your custom font.
body {
padding: 0;
margin: 0;
}
Yep, Have a look at the documentation to configure tailwind.config.js here: https://tailwindcss.com/docs/configuration/