Menu
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.
231
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
121
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".
5
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
