Adding Fonts to Tailwind CSS 4
Want to use custom fonts in Tailwind CSS 4? Super easy! Just follow these steps.
1. Load Your Font
First, load your font in the <head>
of your page. You can do it with a <link>
tag:
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
Or using @import
inside a <style>
tag:
<style>
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');
</style>
Now, let's add it to Tailwind!
2. Adding Fonts to Tailwind
There are three ways to use custom fonts in Tailwind. Pick the one that works best for you.
Option 1: Replace the Default Font Classes
If you want to replace Tailwind’s default fonts, update your tailwind.config.js
like this:
// tailwind.config.js
export default {
theme: {
fontFamily: {
nunito: ['Nunito', 'sans-serif'],
myFont: ['"My Font"', 'serif'] // Wrap names with spaces in quotes
},
}
}
Now, you can use .font-nunito
or .font-myFont
in your HTML:
<p class="font-nunito">Hello, Tailwind!</p>
⚠ Note: This removes the default sans
, serif
, and mono
classes unless you add them back manually.
Option 2: Extend Tailwind’s Default Fonts
Want to add a new font without losing the default ones? Use extend
in your config:
// tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'
export default {
theme: {
extend: {
fontFamily: {
nunito: ['Nunito', 'sans-serif']
}
}
}
}
Now .font-nunito
will work alongside the default font-sans
, font-serif
, and font-mono
classes.
Option 3: Modify an Existing Font Stack
Want to merge your font into an existing Tailwind font stack? Do this:
// tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme'
export default {
theme: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
serif: [...defaultTheme.fontFamily.serif],
mono: [...defaultTheme.fontFamily.mono]
}
}
}
This keeps Tailwind’s default font stacks but puts your font at the top of the list.
/* Generated CSS */
.font-sans {
font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
That’s it! 🎉 Now you can use custom fonts in Tailwind CSS 4 however you like. 🚀