Next.js 13버전에서 글꼴 변경하기 폰트 설정하기

Optimizing: Fonts | Next.js

Using App Router Features available in /app

nextjs.org

Next.js 공식 문서와 영상을 참고했습니다.

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Next app을 생성하면 App폴더 내부 layout.tsx의 기본 모습입니다.

기본 값으로 inter 폰트를 설정한 것을 볼 수 있습니다.

Next에서는 구글 폰트를 쉽게 import 할 수 있습니다.

Browse Fonts - Google Fonts

구글 폰트를 쉽게 import 할 수 있습니다.

Roboto 폰트 사용하기

import { Roboto } from "next/font/google";

const roboto = Roboto({
  subsets: ["latin"],
  weight: ["400", "500", "700"],
});

...

return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  );

Noto Sans Korean 폰트 사용하기

import { Noto_Sans_KR } from "next/font/google";

const noto_sans_kr = Noto_Sans_KR({
  subsets: ["latin"],
  weight: ["400"],
});

...

return (
    <html lang="en" className={noto_sans_kr.className}>
      <body>{children}</body>
    </html>
  );

TailwindCSS를 사용하여 여러 폰트 사용하기

font를 import합니다.
variable을 설정합니다.
className에 variable 프로퍼티를 넣습니다. 띄어쓰기로 구분합니다.
tailwind.config.js 파일을 열고 fontFamily를 설정합니다.
원하는 요소의 className에 fontFamiliy에서 설정한 키를 넣습니다.

import "./globals.css";
import { Roboto, Noto_Sans_KR } from "next/font/google";

const roboto = Roboto({
  subsets: ["latin"],
  weight: ["400", "500", "700"],
  variable: "--font-roboto",
});

const noto_sans_kr = Noto_Sans_KR({
  subsets: ["latin"],
  weight: ["400"],
  variable: "--font-noto_sans_kr",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${roboto.variable} ${noto_sans_kr.variable}`}>
      <body>{children}</body>
    </html>
  );
}

//global.css
.font-roboto {
  font-family: var(--font-roboto);
}

.font-noto_sans_kr {
  font-family: var(--font-noto_sans_kr);
}

export default function Home() {
  return (
    <>
      <div className="font-roboto"> Hello!</div>
      <span className="font-noto_sans_kr">안녕하세요!</span>
    </>
  );
}

저작자표시

'Front End > Next' 카테고리의 다른 글

Next.js 환경에서 Supabase를 이용해 간단하게 카카오 로그인 구현하기 (1) (0)	2023.12.09
Next.js, Typescript 환경에서 라이브러리 “모듈에 대한 선언 파일을 찾을 수 없습니다” 에러 (0)	2023.12.07
Next.js에서 Clerk.js 사용하여 구글 연동 로그인 만들기 (0)	2023.11.16
[Next.js] 전역 객체, .env 타입 설정하기 (0)	2023.10.09
[NEXT JS] 외부 JS파일 사용하기 (0)	2023.09.29

Next에서는 구글 폰트를 쉽게 import 할 수 있습니다.

TailwindCSS를 사용하여 여러 폰트 사용하기

'Front End > Next' 카테고리의 다른 글

티스토리툴바