How to replace the primary font in Tailwind CSS in Next 13
Tailwind CSS supposed to save us time. Many will face this initial challenge to replace the primary font with your custom font.
How to replace the primary font in Tailwind CSS in Next 13
Tailwind CSS supposed to save us time. Many will face this initial challenge to replace the primary font with your custom font.
In this example I am using one Google Font and one custom font. We will keep it clean.
Step 1 — Install tailwind-css and configure
Use the official guide. No magic here. You should end up with the following files:
- tailwind.config.js
- postcss.config.js
Step 2 — Your custom fonts file
Then, in your Next 13 project, create a file fonts.ts . It will contain your custom font declarations. For the example, I am using Core Sans font as a primary, stored in ./src/app/fonts and Barlow, that is available on Google Fonts.
import localFont from 'next/font/local'
import {Barlow} from 'next/font/google'
export const coreSansFont = localFont({
src: [
{
path: './fonts/CoreSansC45Regular.woff2',
weight: '400',
style: 'normal'
},
{
path: './fonts/CoreSansC65Bold.woff2',
weight: '700',
style: 'normal'
}
],
display: 'swap',
variable: '--font-primary'
})
export const barlowFont = Barlow({
weight: ['200', '300', '400', '500', '600'],
subsets: ['latin-ext'],
style: 'normal',
display: 'swap',
variable: '--font-secondary'
})The key takeaway is that I named the font variables as: --font-primary and --font-secondary but you can use any name as long as you’re consistent.
Step 3 — Import your fonts to layout.tsx
In your ./app/layout.tsx , in the file header add:
import {barlowFont, coreSansFont} from './fonts'and modify your <body> tag to be something like:
<body className={`${coreSansFont.variable} font-primary ${barlowFont.variable} font-secondary`}>Step 4 — Link it in your tailwind.config.js
In my case, I’ve decided to replace the default font (sans) with my primary font, then create a new name for “secondary”. I’ve decided to replace serif font just in case I will miss any font declaration since I am using Tailwind UI prebuilt templates.
My config file looks like this:
const defaultTheme = require('tailwindcss/defaultTheme')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}'
],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-primary)', ...defaultTheme.fontFamily.sans],
secondary: ['var(--font-secondary)', 'sans-serif'],
serif: ['var(--font-secondary)', ...defaultTheme.fontFamily.serif]
}
}
},
plugins: []
}Step 5 — Enjoy the result
In your component file, you can test the solution.
<a href="#" className="text-sm font-sans font-bold leading-6">Some label</a>
<a href="#" className="text-sm font-secondary font-bold leading-6">Some label</a>Regarding the font weight variants, Tailwind provides their standard definitions. If the fonts have them different and you must customise them, I suggest look a bit more here and here. Be also aware about fast-refresh issues with Next; to me they seem not resolved even with the latest builds sometimes.
메타데이터
- post_id
- bfdec6ae249f
- slug
- how-to-replace-the-primary-font-in-tailwind-css-in-next-13-bfdec6ae249f
- url
- https://medium.com/@wozdev/how-to-replace-the-primary-font-in-tailwind-css-in-next-13-bfdec6ae249f
- canonical_url
- https://medium.com/@wozdev/how-to-replace-the-primary-font-in-tailwind-css-in-next-13-bfdec6ae249f
- author_url
- https://medium.com/@wozdev
- status
- ok
- fetched_at
- 2026-07-24 00:27:38
