How to easily add a new font to tailwindcss in Next.js

A font is text in a particular style and size like times new roman, sans serif etc

In this tutorial, we are going to show how to add a new font in tailwindcss using a React based framework like Next.js

The new font we are going to use is a google font called work sans, and you can do the same for other fonts as well

The steps are as follow:

Add the new font name to tailwind.config.js file

The first step is to add the choosen font to tailwindcss configuration file.

We need first to get the default theme and add in our new font to theme.fontFamily

The code will look like

const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
 content: [
 "./pages/**/*.{js,ts,jsx,tsx}",
 "./components/**/*.{js,ts,jsx,tsx}",
  ],
 theme: {
 fontFamily: {
 'sans': ['"Work Sans"', ...defaultTheme.fontFamily.sans],
 
    }
 
  },
 plugins: [],
}

Choose the font

Next, we need to get our font, in our example, we are using work sans font provided by google fonts.

• Head to google fonts, you can use this link for work sans font, or look for your favorite one in the search font input field

Once you select your font, you will see at right corner the selected family as the screen shows below

• Choose import type and copy the URL provided, in our case, it is https://fonts.googleapis.com/css2?family=Work+Sans&display=swap

• Now try to open in in a browser, and choose latin as the image below showing

Add the font to the global CSS file

Now, we need to identify our global CSS file to add the font-face.

In Next.js, the global CSS file is defined in our _\_app.js_ file under _pages_ folder

pages/_app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
 return <Component {...pageProps} />
}


export default MyApp

In our case, it is called globals.css, so we need to open it and add the following:

@tailwind base;
@tailwind components;
@tailwind utilities;



@font-face {
 font-family: 'Work Sans';
 font-style: normal;
 font-weight: 400;
 font-display: swap;
 src: url(https://fonts.gstatic.com/s/worksans/v17/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBi8Jpg.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Test our configuration

To make sure everything works as expected create a sample page under pages folder

• pages/test.js

export default function Test() {
return (<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>)
}

The page look like when requesting /test

Without the font

Conclusion

In this tutorial, we have presented how to add a new font using tailwindcss in a React based framework like Next.js, i hope this will help you add your favorite font

You can check also how to integrate tailwindcss with Nextjs in this link, and how to build a spinner using only tailwind in this link