[Next] Next.js에서 폰트(글꼴) 변경하기 (Feat. Google, Local)
오늘은 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를 작성해줍니다.
바뀐 글꼴로 잘 출력되는 모습을 확인할 수 있습니다.
'Web > React.js' 카테고리의 다른 글
| [Next.js] Meta Data 및 Open Graph 적용하기 (Feat. Next 14) (0) | 2024.08.02 |
|---|---|
| [React] 페이지 이동 시 스크롤 화면 최상단 이동하기 (2) | 2024.02.10 |
| [React] react-router-dom v6 프로젝트에 적용하기 (1) | 2023.11.02 |
| [PWA] React 프로젝트에 PWA 적용하기 (1) | 2023.08.23 |
