(Next.js) document fonts

Next.js _document.tsx에서 link를 통해서 폰트를 적용하는 방법이다.

적절한 폰트를 찾는다.
https://fonts.google.com/

_document.tsx

<Head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
  <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
      rel="stylesheet"
  />
</Head>

globals.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* {
  font-family: 'Inter', sans-serif;
}

tailwindcss

tailwind.config.js

const { fontFamily } = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  //...
  theme: {
    extend: {
      fontFamily: {
        sans: ['inter', ...fontFamily.sans],
      },
      //...
    }
};

_app.tsx

<div className="font-sans">
  <Component {...pageProps} />
</div>