[NEXT.js 14] 4. Font 바꾸기

 

NEXT.js 에서는 'next/font/google'와 같이 google font 라이브러리를 내장하고 있어 접근성이 좋습니다.

뿐만 아니라 'next/font'는 모든 글꼴 파일에 자동적으로 자체 호스팅이 내장돼 있고,

이를 적용하고서 레이아웃(뷰)의 쉬프트(깜빡임, 글꼴의 순간적 변화 등) 없이 폰트를 사용할 수 있습니다.

 

Font 바꾸기

 

  1. import {...} from 'next/font/google'; 

 

  2. layout.tsx 또는 Font.ts 컴포넌트에 사용할 Font 작성

 

  3. tailwind.config.ts 작성 

 

  4. tailwind css 표기로 사용하기

---

상세

  1. import {...} from 'next/font/google'; 

# app/font.ts

import { Font명칭 } from 'next/font/google';

---

 

  2. layout.tsx 또는 Font.ts 컴포넌트에 사용할 Font 작성

# app/font.ts

import { ABeeZee } from 'next/font/google';

export const abeezee = ABeeZee(
  {
    subsets: ['latin'],
    variable: '--font-abeezee',
    weight: '400',
    display: 'swap',
  });

---

 

  3. tailwind.config.ts 작성 

# /tailwind.config.ts

import type {Config} from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        abeezee: ['var(--font-abeezee)'],
      },
    },
  },
  plugins: [],
};

export default config;

---

 

  4. tailwind css 표기로 사용하기

(1) global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply font-abeezee text-white
}

 

(2) page.tsx

# 적용할 page

export default function Home() {
  return (
    <>
      <div className="main-bg font-abeezee">
        ...
      </div>
    </>
  );
}

---

 

NextJS 공식문서: Optimization > Font