0) 개요
- 폰트 소스: 눈누(noonnu) 같은 무료 웹폰트 CDN 또는 직접 파일 보관
- 웹 최적 포맷: WOFF2 권장 (용량 작고 브라우저 지원 좋음)
- 프레임워크: Next.js + Tailwind CSS v4 기준
1) 방법 A — 눈누 CDN 그대로 쓰기 (가장 쉬움)
- 눈누에서 폰트 검색 → CSS 코드 복사
- 전역 CSS(
app/globals.css)에@font-face붙여넣기
/* 예: 가평 한석봉 Bold (CDN) */
@font-face {
font-family: "GapyeongHanseokbong";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/GapyeongHanseokbong-Bold.woff2")
format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}얇은 두께(300/400)도 쓰려면 그에 해당하는 다른 파일을 추가 등록해야 한다.
같은font-family이름으로 여러 weight를 등록하면font-weight로 제어 가능.
2) 방법 B — 파일 직접 호스팅(권장: woff2 변환 후)
1. 변환
- TTF/OTF → WOFF2로 변환 (Font Squirrel, Google Fonts tool, SFNT etc)
- 구글에 WOFF2 변환 검색하면 됨
2. 폴더 구조
public/fonts/
GapyeongHanseokbongL.woff2 # 300
GapyeongHanseokbong-Bold.woff2 # 700 (선택)3. 전역 CSS 등록
@font-face {
font-family: "GapyeongHanseokbong";
src: url("/fonts/GapyeongHanseokbongL.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GapyeongHanseokbong";
src: url("/fonts/GapyeongHanseokbong-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}포인트: 같은
font-family이름으로 묶어야font-weight로 얇고/두껍게 전환된다.
3) 추가: Tailwind v4에 기본 폰트로 연결
- 클래스네임에 선언하지 않고 기본 폰트로 사용하고 싶을 때
app/globals.css (Tailwind v4 문법)
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
/* ⬆️ 위에 @font-face 블록들 위치 */
@theme inline {
--color-global: #f3f2ef;
--color-background: var(--background);
--color-foreground: var(--foreground);
/* Tailwind의 기본 sans를 한석봉으로 교체 */
--font-sans: "GapyeongHanseokbong", system-ui, -apple-system, "Segoe UI",
Roboto, "Noto Sans", "Apple SD Gothic Neo", "Malgun Gothic",
"Helvetica Neue", Arial, sans-serif;
/* 필요하다면 monospace도 여기에 */
/* --font-mono: var(--font-geist-mono); */
}
/* 다크 모드 색상 예시 */
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
/* 자주 쓰는 조합 유틸(선택) */
@layer utilities {
.text-hanseok {
@apply font-sans text-[16px] leading-[150%] tracking-[-0.025em] text-center;
}
}
/* 전역 기본 폰트 적용 */
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
font-weight: 300; /* Light를 기본으로 쓰고 싶다면 */
}사용:
<p className="font-sans">기본 폰트(한석봉 Light)</p>
<p className="font-sans font-bold">굵게(700)</p>
<p className="text-hanseok">유틸 조합 클래스 사용</p>4) 넥스트js 전용 최적화 대안 — next/font/local (선택)
자동 서브셋/프리로드가 필요하면 이 방법이 더 좋다.
app/layout.tsx
import localFont from "next/font/local";
const hanseok = localFont({
src: [
{ path: "./fonts/GapyeongHanseokbongL.woff2", weight: "300", style: "normal" },
{ path: "./fonts/GapyeongHanseokbong-Bold.woff2", weight: "700", style: "normal" }, // 선택
],
variable: "--font-hanseok",
display: "swap",
});
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko">
<body className={hanseok.variable}>{children}</body>
</html>
);
}globals.css
@theme inline {
--font-sans: var(--font-hanseok), system-ui, -apple-system, "Segoe UI",
Roboto, "Noto Sans", "Apple SD Gothic Neo", "Malgun Gothic",
"Helvetica Neue", Arial, sans-serif;
}
기록하자