[Snippet] Using next/font with Tailwind #42023

agusterodin · 2022-10-27T23:55:35Z

agusterodin
Oct 27, 2022

tailwind.config.js

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    fontFamily: {
      display: 'var(--exo-font)',
      sans: 'var(--open-sans-font)'
    }
}

Fonts.tsx

import { Exo, Open_Sans as OpenSans } from '@next/font/google'

const exo = Exo({ display: 'swap', fallback: ['Helvetica Neue', 'Helvetica', 'sans-serif'], subsets: ['latin'] })
const openSans = OpenSans({ display: 'swap', fallback: ['Helvetica Neue', 'Helvetica', 'sans-serif'], subsets: ['latin'] })

export default function Fonts() {
  return (
    <style jsx global>{`
      :root {
        --exo-font: ${exo.style.fontFamily};
        --open-sans-font: ${openSans.style.fontFamily};
      }
    `}</style>
  )
}

app.tsx

import { AppProps } from 'next/app'
import Head from 'next/head'
import Fonts from 'components/Fonts'
import 'styles.css'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Website Name</title>
      </Head>
      <Fonts />
      <Component {...pageProps} />
    </>
  )
}

SalGnt · 2022-10-31T19:37:21Z

SalGnt
Oct 31, 2022

Nice! I think you can get rid of the Fonts.tsx component and use of the built in variable.

7 replies

itzomen Nov 4, 2022

@kyuumeitai can you please provide an example. I was not able to set up my fonts globally using the variable

The Fonts.tsx works well.

SalGnt Nov 5, 2022

@kyuumeitai can you please provide an example. I was not able to set up my fonts globally using the variable

The Fonts.tsx works well.

You can take a look at this article wrote by @alvarlagerlof.

SalGnt Nov 6, 2022

You can also find an an example here.

itzomen Nov 6, 2022

Ok thanks, btw I couldn't get that to work in app.tsx
And I forgot to mention I'm using good old css.
Well I don't see any caveat with Fonts.tsx so I will stick to that for now

ghost Dec 3, 2022

@kyuumeitai can you please provide an example. I was not able to set up my fonts globally using the variable

The Fonts.tsx works well.

Font.tsx works but i get the client/server mismatch error when i try to upload multiple local fonts to a font family as shown in the docs here. And while the referenced solution works, it's a bit too ugly and causes subsequent unwanted behavior.

Variable didn't work initially but it turned out i forgot to add className={`${Font1.variable} ${Font2.variable}`} in layout.tsx to my root tag.

Worked like a charm after i added the className and it seems like the way to go for now.

kyuumeitai · 2022-11-01T13:24:29Z

kyuumeitai
Nov 1, 2022

If by any chance you have the client/server mismatch error: Warning: Text content did not match. Server ... Client ... , you can apply this solution on the Fonts.tsx file:

#3108 (comment)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Snippet] Using next/font with Tailwind #42023

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 7 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

[Snippet] Using next/font with Tailwind #42023

Uh oh!

Uh oh!

Replies: 2 comments · 7 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 2 comments 7 replies