03-1. font

Next.js 12

12버전에는 보통 다음과 같이 구글 폰트를 적용했다.

export default function Home() {
  return (
    <div>
      <Head>
        <title>Font Test</title>
        <meta name="description" content="Font Test" />
        <link rel="icon" href="/favicon.ico" />
        <link rel="preconnect" href="https://fonts.googleapis.com"/>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
        <link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet"/>
      </Head>
  ...

위처럼 font를 가져와서 처리한다.

그래서 잠깐의 시간 차이인 하지만 가져오기 직전 fallback font로 보였다가

font가 load 되면서 layout shift가 발생하곤 하였다.

Layout shift 란

fallback font와, 내가 사용하려는 font와

동일한 font-size를 사용해도, font 고유의 크기가 달라서 font가 load되면서

layout이 밀리는 현상이다.

출처: https://blog.mathpresso.com/how-next-font-works-8bb72c2bae39

Next.js 13에서부터는 adjustFallbackFont 라는 기능을 이용해

CSS의 size-adjust 속성을 조정해 크기 차이가 발생하지 않게하였다.

그러나 이 효과는 사용하고 싶은 font가 늦게 뜨는 현상에 초점을 맞춘 것이 아닌 각 font의 고유 크기에 대한 관점이다.

Pre-loaded fonts

Next.js 13에서부터는 google font를 build time에서 가져오기 때문에, 런타임때 구글에게 network 요청하여 가져오지 않는다. Font를 self-host하게 되는 것이다.

공식문서: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

create-next-app을 하게되면 default로 구글의 Latin이라는 폰트를 사용하게 되는데

생성할 때부터 기본적으로 생성된 코드는 다음과 같다.

import { Inter } from 'next/font/google'
 
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

위 코드를 특정 폴더 layout에 적용할 수도 있고, root layout에 적용해 전체 application에 적용할 수도 있다.

Local Fonts without Tailwind CSS

퍼블리셔들은 (사실 퍼블의 세계 잘 모름) 아마 대부분 자신이 가지고 있는 .ttf, .otf나 .woff 파일을 이용해 local font를 이용하고 싶어할 것이다. 이 때 설정하는 방법은 다음과 같다.

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

Local Fonts with Tailwind CSS

위처럼 .classname을 사용하는 대신에 아래처럼 variable을 생성한다. (--font-inter SCSS 문법과 같이)

import { Inter } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

그 후 tailwind.config.js에 들어가 이 variable을 가지고 utility class를 생성할 수 있다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

위처럼 세팅해놓고 이제

<div className="font-sans">Font Test</div>

적용하기 위해서는 globals.css로 가서

@layer base {
  h1 {
    @apply font-sans;
  }
}

로 하면 <h1> tag 안에서 자동으로 적용되는 것을 볼 수 있다.

'Frontend (Next.js Tailwind Typescript) > Next.js' 카테고리의 다른 글

02-2. Next.js를 위한 기본 javascript syntax (0)	2023.12.11
02-4. JSON schema validator: ajv (0)	2023.12.11
01-6. 폴더 구조 설정 (0)	2023.12.05
01-3. [재작성] ESLint / Prettier 설정 (1)	2023.12.04
Next.js Learn Course (1)	2023.11.29