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/
Related
My application is built using NextJs and uses Chakra UI.
I have installed Google Fonts by following this
chakra Google fonts
npm install #fontsource/open-sans #fontsource/raleway
import { extendTheme } from "#chakra-ui/react"
const theme = extendTheme({
fonts: {
heading: "Open Sans",
body: "Raleway",
},
})
export default theme
Now I can use two different fonts,
For Body
For headings
However, how about using more fonts ?
Say I was to use different fonts for Buttons,
Different for Text.
Also within text, I want to use different fonts for Italic and underlined text portions.
How do I do that ?
It is pretty easy to add more fonts using the theme, you just need to add them in fonts: {} and then you can reference them by using the chakra variable: var(--chakra-fonts-xxx)
For example, if you want to define a font dedicated to subheader:
import { extendTheme } from "#chakra-ui/react";
const theme = extendTheme({
fonts: {
heading: "Open Sans",
subHeading: "Times New Roman",
body: "Arial Black",
},
textStyles: {
h2: {
'font-family': 'var(--chakra-fonts-subHeading)',
},
}
});
export default theme;
Now when you'll create a h2 component (<Heading as="h2">h2 text</Heading>), it will use this font.
You'll notice that unfortunately, I had to use 'font-family' instead of fontFamily (it seems to be an existing bug, same for font-weight).
To use different fonts in Buttons, you can customize Buttons components from your theme.
in const theme, the same way as fonts you need to create a components object:
const theme = extendTheme({
fonts: {
heading: "Open Sans", body: "Raleway",
},
components: {
Button: {
baseStyle: {
fontFamily: 'yourfont here'
}
}
}
})
You can do the same with other state of buttons for example _hover, _focus, _isDisabled, etc.
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.
module.exports = {
purge: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./layout/**/*.{js,ts,jsx,tsx}",
"./const/**/*.{js,ts,jsx,tsx}",
"./fonts/**/*.{js,ts,jsx,tsx,ttf}",
"./utils/**/*.{js,ts,jsx,tsx}",
],
darkMode: false,
theme: {
extend: {
colors: {
"brand-green": "#4DF69B",
"brand-amber": "#FF8656",
"brand-red": "#FF5656",
"brand-gray": "#7E7E7E",
},
width: {
content: "fit-content",
},
top: {
20: "5rem",
},
fontFamily: {
DINAlternate: ["DINAlternate", "sans-serif"],
},
},
},
variants: {
extend: {
borderWidth: ["hover"],
textColor: ["group-focus"],
},
},
plugins: [],
};
My config.
I changed my next.config.js to to next.config.ts then it told me that it should have .js format I rewrite it and as I think after I tried to move every file to .ts format my tailwind broke. It works with margins/paddins but not with bg though it works with text-red-200
If I inspect elements I can see bg-brand-red classes but it just doesn't apply them.
It worked well but after I refactor code it broke but once I reset everything to prev commit I still get this problem where background colors doesn't work.
It is weird since it worked one time and in 5mins it got broken even when I rollbacked to last commit on github it still be broken
How can I know what is the problem?
In my global css file where I import:
#tailwind base;
#tailwind components;
#tailwind utilities;
I moved this piece of code below body{...} and everything works now
body {
font-family: "DIN Alternate", sans-serif;
font-size: 16px;
}
#tailwind base;
#tailwind components;
#tailwind utilities;
To the first thing you should check if the same error occured is how you import tailwind css
I moved body to the bottom since fonts didn't work and it WORKED. Weird problem. I think tailwind just needed some refresh in styles
UPD:
#tailwind base;
#tailwind components;
#tailwind utilities;
body {
font-family: "DIN Alternate", sans-serif;
font-size: 16px;
}
you are importing and declaring in the wrong order - tailwind has some kind of weird problem in compilation about scss ordering - so instead if body first it should come after components and before utilities.
#import 'tailwindcss/base';
#import 'tailwindcss/components';
body {
font-family: "DIN Alternate", sans-serif;
font-size: 16px;
}
#import 'tailwindcss/utilities';
Here is what you can do:
Change tailwing.config.js
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
]
to this
content: [
"./resources/**/*.blade.php",
"./resources/**/**/**/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
and finally run the following command
npm run dev
Any change inside the tailwind.config.js requires the dev server to be restarted. Restarting the server helped me.
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 have created a javascript direflow application. I am trying to load a local font but haven't been able to.
Below are the details and code snippets I have applied.
Folder Structure
font.css
#font-face {
font-family: 'MyLocalFont';
src: local('MyLocalFont'),
url('./fonts/MyLocalFont.woff') format('woff'),
url('./fonts/MyLocalFont.woff2') format('woff2');
}
direflow-components/testing-component/index.js
plugins: [
{
name: 'font-loader',
options: {
custom: {
families: ['MyLocalFont'],
urls: ['/fonts.css']
},
},
},
],
App.css
.header-title {
font-size: 34px;
color: #5781C2;
font-family: 'MyLocalFont';
}
The font files doesn't load. Please help.
Note: Built a react app using create-react-app there with #font-face changes the fonts load. Something with direflow is not working.
I resolved the issue seems like the plugin font-loader is not required. I removed it from direflow-components/testing-component/index.js.
Another change I made is removed the single quotes from the font-family.
App.css
.header-title {
font-family: MyLocalFont;
}