開発日記-2024-08-23 / next/fontのフォントをTailwind CSSで定義する

Next.js 13 + Tailwind CSSでGoogle Fontsを使おう - Qiita

tailwind.config.ts

export default {
  // ...
  theme: {
    fontFamily: {
      ['source-code-pro']: 'var(--font-source-code-pro)',
    },
  },
  // ...
}

app/layout.tsx

const sourceCodePro = Source_Code_Pro({
  subsets: ['latin'],
  weight: ['400'],
  variable: '--font-source-code-pro',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='ja' className={`${sourceCodePro.variable}`}>
      <body>
        <p className="font-source-code-pro font-bold">Hello world.</p>
      </body>
    </html>
  )
}

Tailwind CSSを使っている場合は以上のようにした方が良い。次のような className で指定する場合だとVS CodeのTailwind CSS IntelliSenseで補完が効かなくなったりして不便。

<p className={`${sourceCodePro.className} font-bold`}>Hello world.</p>

開発日記-2024-08-23 / next/fontのフォントをTailwind CSSで定義する

next/fontのフォントをTailwind CSSで定義する

最近公開された記事