모든 작업은 NextJS 13버전(13.4.12) 기준입니다.
작업을 시작하기 앞서, NextJS에서 제공하는 폰트를 이용한다.
사유는 다음과 같다.
•
google font 자체 호스팅하며, 네트워크를 통한 요청이 필요없음.
•
프리렌더링.
•
size-adjust를 이용해 layout Shifting를 방지해준다.
따라서, NextJS에서 제공하는 폰트를 이용한다.
단, 기본폰트는 Ubuntu 폰트를 이용하고, 한글은 Noto Sans KR을 이용하도록 할 것이다.
기본폰트 - Ubuntu 폰트 적용
먼저 Ubuntu 폰트부터 적용하자.
...imports
import { Ubuntu } from "next/font/google";
// English And Number Font
const ubuntuFont = Ubuntu({
weight: ["300", "400", "500", "700"],
subsets: ["latin"],
});
TypeScript
복사
Ubuntu 폰트의 경우 weight 필드가 필수이기 때문에 직접 입력해주었다.
한글폰트 - Noto Sans KR 폰트 적용
1. NextJS goolge Font → 한글 폰트 적용
그리고, 한글 폰트를 적용하도록 하자.
...imports
import { Ubuntu } from "next/font/google";
// English And Number Font
const ubuntuFont = Ubuntu({
weight: ["300", "400", "500", "700"],
subsets: ["latin"],
});
// Korean Font
const notoSansKRFont = Noto_Sans_KR({
subsets: ["kr"], // error
});
TypeScript
복사
❗️문제가 발생했다. 아직 NextJS에서는 특정 언어를 지원하지 않는듯 하다.
NextJS를 사용하기 이전에는 unicode-rage 등의 필드를 이용하였는데 이부분 또한 지원하지 않고 있다.
2. globals.css 에 한글 폰트 적용
따라서, 한글폰트는 globals CSS 에 직접 삽입 하도록 하자.
웹을 통해서 다운받기 보다는 로컬 자체를 들고 있는걸 선호하기 때문에, 폰트 자체를 다운받도록 하자.
다운완료 이후, app/assets/fonts 하위에 다운받은 파일들을 전부 넣는다.
그 후, gloabals.css 파일에 @font-face 를 삽입한다.
// gloabals.css
...
/* Korean Font */
@font-face {
font-family: Noto Sans KR;
font-style: auto;
font-weight: 100;
src: url("./assets/fonts/NotoSansKR-Thin.otf") format("opentype");
unicode-range: U+AC00-D7A3;
}
@font-face {
font-family: Noto Sans KR;
font-style: auto;
font-weight: 300;
src: url("./assets/fonts/NotoSansKR-Light.otf") format("opentype");
unicode-range: U+AC00-D7A3;
}
@font-face {
font-family: Noto Sans KR;
font-style: auto;
font-weight: 400;
src: url("./assets/fonts/NotoSansKR-Regular.otf") format("opentype");
unicode-range: U+AC00-D7A3;
}
@font-face {
font-family: Noto Sans KR;
font-style: auto;
font-weight: 500;
src: url("./assets/fonts/NotoSansKR-Medium.otf") format("opentype");
unicode-range: U+AC00-D7A3;
}
@font-face {
font-family: Noto Sans KR;
font-style: auto;
font-weight: 700;
src: url("./assets/fonts/NotoSansKR-Bold.otf") format("opentype");
unicode-range: U+AC00-D7A3;
}
@font-face {
font-family: Noto Sans KR;
font-style: auto;
font-weight: 900;
src: url("./assets/fonts/NotoSansKR-Black.otf") format("opentype");
unicode-range: U+AC00-D7A3;
}
CSS
복사
3. tailwind.config.js에 적용
font-family 를 적용할 것인데, globals.css 에서는 Ubuntu를 불러올 수가 없다.
결론적으로, tailwind.config.js에서 font-family를 만들어준 후, 적용시켜보자.
그러기 위해서, 먼저 이전에 생성한 Ubuntu 폰트에 variable을 설정해준다.
// layout.tsx
const ubuntuFont = Ubuntu({
weight: ["300", "400", "500", "700"],
subsets: ["latin"],
variable: "--font-ubuntu", // 여기 추가
});
TypeScript
복사
그런 다음,tailwind.config.js에서 font-family를 만들어준 후, 적용시켜보자.
// tailwind.config.js
...
theme: {
extend: {
fontFamily: {
custom: ["Noto Sans KR", "var(--font-ubuntu)"],
},
...
}
},
...
TypeScript
복사
Noto Sans KR 은 unicode-range: U+AC00-D7A3를 설정 해주었기 때문에 한글은 Noto Sans KR이 적용될 것이다. 그 외 언어는 Ubuntu가 적용될 것이다.
적용
마지막으로, layout.tsx 에 폰트를 적용시자.
// layout.tsx
import "./globals.css";
import type { Metadata } from "next";
import { Ubuntu } from "next/font/google";
import Link from "next/link";
// English And Number Font
const ubuntuFont = Ubuntu({
weight: ["300", "400", "500", "700"],
subsets: ["latin"],
variable: "--font-ubuntu",
});
export const metadata: Metadata = {
title: "HYEOK999's Playground",
description: "Welcome to HYEOK999's Playground",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={ubuntuFont.variable}>
<body className="font-custom">
...
</body>
</html>
);
}
TypeScript
복사
결과
테스트를 위하여 다음과 같이 한글, 영문, 한글영문숫자를 혼합하여 작성하자.
// page.tsx
...
<main>
한글입니다. <br />
This is English <br />
한글 English 123 <br />
</main>
...
TypeScript
복사
각각 정상 작동 함을 알 수 있다.