Configuring your fonts in Next.js 13 with Stitches

#nextjs #stitches #font #tutorial

Next.js 13 made using fonts way easier. But, let's take a look at how configure the fonts with Stitches.

To start things off, install Stitches in your project's terminal.

npm install @stitches/react

Create your stitches.config.ts (or .js) and import the createStitches function.

// stitches.config.ts
import { createStitches } from '@stitches/react';

Also import the fonts you will use. In this case, I'm going to use a Google font and a local one to exemplify.

// stitches.config.ts
import { createStitches } from '@stitches/react'
import { MuseoModerno } from 'next/font/google' // google font
import localFont from 'next/font/local' // local font

Now, you can define the instances of your fonts. In this case, Google's font subset is for Latin characters only (this could be different if you have a different language). You can get to specify which weights you want too.

// stitches.config.ts
import { createStitches } from '@stitches/react'
import { MuseoModerno } from 'next/font/google' // google font
import localFont from 'next/font/local' // local font

const museo = MuseoModerno({ subsets: ['latin'], weight: '400' })
const montserrat = localFont({ src: '../assets/Montserrat-Regular.ttf', weight: '400' })

The createStitches function receives a configuration object with many definition options. Where in theme you will define your font tokens in fonts. Name a token for your font, and then getting the .style.fontFamily property of the fonts that you defined before.

// stitches.config.ts
import { createStitches } from '@stitches/react'
import { MuseoModerno } from 'next/font/google' // google font
import localFont from 'next/font/local' // local font

const museo = MuseoModerno({ subsets: ['latin'], weight: '400' })
const montserrat = localFont({ src: '../assets/Montserrat-Regular.ttf', weight: '400' })

export const {
    getCssText,
    globalCss,
    styled,
    theme
} = createStitches({
    theme: {
        fonts: {
            museo: `${museo.style.fontFamily}, sans-serif`,
            montserrat: `${montserrat.style.fontFamily}, sans-serif`
        }
    }
})

After your font tokens are defined, you can use them to style elements, for example.

import { globalCss } from "./stitches.config";

export const globalStyles = globalCss({

    h1: {
        fontFamily: "$museo"
    },

    p: {
        fontFamily: "$montserrat"
    }
})

Finally, don't forget to call globalStyles in your app.

import { globalStyles } from '@/styles/global'
import type { AppProps } from 'next/app'

globalStyles()

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

And to make it better, you can configure server-side rendering too, importing the <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} /> tag in to the Head 😉.

import { getCssText } from '../styles/stitches.config'
import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
        <title>Fonts</title>
        <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
      </Head>
      <main>
        <h1>Hello world!</h1>
      </main>
    </>
  )
}

Check the Git repository with the complete example, and to see more about next/font, and Stitches: installation, theme tokens and server-side rendering.