AngelPlayer`s Diary

 

오늘은 Next.js에서 Font(글꼴)을 변경하는 방법을 알려드리겠습니다.

 

내용은 크게

Google Font 적용 방법

여러 개의 Google Font 적용 방법

Local Font 적용 방법

입니다.

 

 

 

 

Google Font 적용하기

과거 HTML이나 React를 사용할 때는 cdn을 통해서 Google Font를 사용한다고 알려주거나,

폰트를 직접 다운로드 받아서 연결하는 작업이 필요했습니다.

 

https://angelplayer.tistory.com/510

 

[HTML/CSS] 외부 Font(TTF/OTF) 웹 페이지에 적용하기

테스트 환경 React + Vite ※. TTF vs OTF 차이 폰트 구조 TTF는 오래된 폰트 형식으로, 덜 복잡한 비트맵으로 구성되어 있어 일부 오래된 시스템과의 호환성이 더 좋을 수 있습니다. OTF는 TTF의 확장 버

angelplayer.tistory.com

 

 

 

반면 Next13부터는 next/font/google이 기본적으로 layout.jsx 파일에 내장되어 있어 손쉽게 구글 폰트를 적용할 수 있습니다.

 

 

 

Google Font 선택하기

https://fonts.google.com/specimen/Advent+Pro#axis-definitions

 

Advent Pro - Google Fonts

Advent Pro is a modern font designed for web and print. Advent Pro utilizes some of the universal characteristics of the sans-serif genre with modern characteri

fonts.google.com

우선 Google Font에서 원하는 폰트를 찾아줍니다. 

 

요즘 글꼴들은 다 비슷비슷하게 생겨서 좀 특징적인 폰트를 가져와 봤습니다.

 

 

 

코드 작성하기

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

Next에서는 layout.tsx에서 next/font/google을 통해 쉽게 원하는 글꼴을 임베딩할 수 있습니다.

(다른 파일에서 지정도 가능하지만 기본적으로 Next 13, 14는 layout.tsx에 next/font/google가 자동으로 import 되어 있습니다.)

 

원하는 파일명을 import문에서 입력해주세요.

 

 

 

const adventPro = Advent_Pro({
    weight: ['400', '700'], // 필요한 폰트 두께 선택
    subsets: ['latin'], // 필요한 서브셋 선택
});

 

다음으로 폰트의 속성을 지정해주어야 합니다.

 

subsets 속성은 필수이고 weight는 선택인데, 따로 작성하지 않으신다면 기본 두께(400)만 사용할 수 있습니다.

 

 

 

<body className={adventPro.className}>{children}</body>

HTML 태그의 className으로 해당 폰트를 사용하겠다라고 명시해주시면 됩니다.

 

 

 

글꼴이 잘 적용되어 화면에 출력되었습니다.

 

 

 

// layout.tsx
import type { Metadata } from 'next';
import { Advent_Pro } from 'next/font/google';
import './reset.css';

const adventPro = Advent_Pro({
    weight: ['400', '700'], // 필요한 폰트 두께 선택
    subsets: ['latin'], // 필요한 서브셋 선택
});

export const metadata: Metadata = {
    title: 'SeungHeon`s Portfolio',
    description: 'Who is SeungHeon Shin?',
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang='ko'>
            <body className={adventPro.className}>{children}</body>
        </html>
    );
}

전체 코드는 위와 같습니다.

 

 

 

 

여러 Google Font 사용하기

import type { Metadata } from 'next';
import { Anton, Advent_Pro } from 'next/font/google';
import './reset.css';

const adventPro = Advent_Pro({
    weight: ['400', '700'], // 필요한 폰트 두께 선택
    subsets: ['latin'], // 필요한 서브셋 선택
});

const anton = Anton({
    weight: '400',
    subsets: ['latin'],
});

export const metadata: Metadata = {
    title: 'SeungHeon`s Portfolio',
    description: 'Who is SeungHeon Shin?',
};

export default function RootLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <html lang='ko'>
            <body className={`${adventPro.className} ${anton.className}`}>{children}</body>
        </html>
    );
}

여러 개의 구글 폰트를 사용하는 방법도 간단합니다.

 

next/font/google를 통해서 원하는 폰트를 import하고, 폰트 설정 변수를 각각 만들어 줍니다.

 

body에서 모든 글꼴을 가져와 쓸 것임을 className을 통해 명시해주면 쉽게 해결할 수 있습니다.

 

 

 

Local Font 적용하기 (Pretendard)

마지막으로 Local Font를 적용하는 법에 대해서 알아보도록 하겠습니다.

 

 

https://github.com/orioncactus/pretendard

 

GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ

어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform - orioncactus/pretendard

github.com

 

 

 

먼저 글꼴 파일을 다운받아 public/fonts 폴더에 넣어줍니다.

 

 

 

import localFont from 'next/font/local';

const pretendard = localFont({
    src: '../../public/fonts/PretendardVariable.woff2',
    display: 'swap',
    weight: '45 920',
    variable: '--font-pretendard',
});

// ...
	<body className={`${pretendard.variable}`}>{children}</body>

next/font/local를 import하고, 속성 값을 지정해줍니다.

 

속성 값의 경우 폰트 제공자가 지정한 방식을 사용하였습니다.

 

아까와 동일하게 body의 className에 pretendard.variable를 작성해줍니다.

 

 

 

바뀐 글꼴로 잘 출력되는 모습을 확인할 수 있습니다.

 

 

 

 

공유하기

facebook twitter kakaoTalk kakaostory naver band