Configuring your fonts in Next.js 13 with Stitches
Tags: nextjs, stitches, font, tutorial
Published: 2023-05-01 18:26:38

![Next.js + Stitches](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqwu0pqxk4atprl1hq8n.png)

Next.js 13 made using [fonts](https://nextjs.org/docs/basic-features/font-optimization) 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](https://github.com/jeanpelanda/fonts-with-nextjs-and-stitches) with the complete example, and to see more about [next/font](https://nextjs.org/docs/basic-features/font-optimization), and Stitches: [installation](https://stitches.dev/docs/installation), [theme tokens](https://stitches.dev/docs/tokens) and [server-side rendering](https://stitches.dev/docs/server-side-rendering).