Back

Custom Fonts with Tailwind CSS in NextJS


Next has released @next/font solution to integrate with google fonts as well as local fonts. Check out [https://nextjs.org/docs/pages/building-your-application/optimizing/fonts](official guide) for the latest implementation

There isn't an official guide on applying custom fonts with TailwindCSS in NextJS site. It took a while for me to experiment but turns out it's quite easy to do it yourself. So following the default template, your file structure should be similar to mine.

Key files we will be working on will be a global css file global.css that is imported in _app.tsx ( create-next-app already done it) while we will setup the font family in tailwind.config.js to extend the default fontFamily theme.

Custom title

This is a note

- pages
-- _app.tsx
- public
-- styles
---- fonts
------ font-medium.woff2
------ font-bold.woff2
---- global.css
- tailwind.config.js

Google Fonts

@Fontsource

Fontsource provide a self-hosting alternative to Google Fonts, as you include the font as a dependency package. It brings significant performance gain as it no longer requires you to load font from third-party hosting platforms. Go tofontsource's directory and follow the instructions

yarn add @fontsource/inter

You will need to import the font in _app.tsx, or you can also specify the weight and style that you want. Check the instruction for the exact style and weight variations. Some fonts might also has variable font support.

# Default
import "@fontsource/roboto"

# Specific Font Weight & Style
import "@fontsource/roboto-serif/400.css"
import "@fontsource/roboto-serif/400-italic.css"

# Variable Font
import "@fontsource/inter/variable.css";

Last Updated May 14, 2024
Tags
typographytailwindcss

Related posts

    Weekly Design Documentaries Free Streaming — Helvetica

    Independent film director Gary Hustwit announced to offer free streaming of his past work to encourage people staying home. First title would be his typography documentary Helvetica (2007).

    Design Documentaries

    Catching up with some design documentaries in the last few months during quarantine, here's my recommended list! The two-season documentary series highlight artists across various fields of design. Ea