search

Multiple Fonts

hashtag
Overview

In the starter kit, I have already configured two fonts: Interarrow-up-right and Source Serif 4arrow-up-right. To use those fonts, you can use the font-sans and font-serif class in TailwindCSS.

hashtag
Customize

You can find the following piece of code in src/app/layout.tsx and tailwind.config.ts file:

layout.tsx
import { Inter, Source_Serif_4 } from 'next/font/google';
// other import statements

// making an object of Inter font, and giving it variable '--font-sans'
const fontSans = Inter({ subsets: ['latin'], variable: '--font-sans' });

// making an object of Source Serif 4 font, and giving it variable '--font-serif'
const fontSerif = Source_Serif_4({
  subsets: ['latin'],
  style: ['italic', 'normal'],
  variable: '--font-serif',
});

// some code here
      <body
        className={cn(
          'font-sans antialiased', // making font-sans default
          fontSans.variable, // with this, you can use font-sans anywhere
          fontSerif.variable // with this, you can use font-serif anywhere
        )}
      >
// other code

Now using the above reference, let's try to use another font. We'll try using Space Groteskarrow-up-right as font-mono.

We can very easily edit the above files as below:

Now as you can see, we imported Space_Grotesk from next/font/google and then we created an object of it.

Then we passed fontMono.variable in the className attribute of <body> tag.

Other than that, we simply had to add mono: ['var(--font-mono)', ...fontFamily.mono], in our tailwind.config.ts and we're done!

Now you can use font-mono as a className in any file and the font will be used.

hashtag
Other resources

PreviousCustom stylesNextDark Mode

Last updated