새로워진 스냅덱, 더 빠른 덱 제작 흐름을 만나보세요.

font

웹폰트 적용하기

웹폰트는 미학보다 로딩·fallback·라이선스가 먼저입니다. 한글 웹폰트는 라틴 대비 파일이 큽니다. 4굵이 full subset woff2만으로 수 MB가 될 수 있어 LCP·CLS에 직접 영향을 줍니다. Pretendard variable, Noto Sans KR Google CDN, self-host subset 중 프로젝트에 맞는 전략을 고르고, font-family fallback과 Licenses 조건을 함께 설계하세요.

웹폰트 후보 비교 라이선스 확인

실제로 이렇게 보입니다

아래 샘플은 실제 폰트 파일을 불러와 프로젝트에서 쓰는 문장·크기·굵기로 렌더링한 것입니다. 썸네일이 아니라 화면에서의 리듬을 확인하세요.

웹폰트 CSS 스택 · Pretendard

font-family · fallback · font-display

:root {
  --font-sans: "Pretendard", -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  font-display: swap;
}

.btn-primary {
  font-weight: 600;
  font-size: 14px;
}

400·600·700만 서브셋하면 LCP 부담을 줄일 수 있습니다. 전체 굵기를 한 번에 로드하지 마세요.

히어로 섹션 · Inter + Pretendard

clamp()로 반응형 제목

Preview fonts in context
웹폰트는 히어로·본문·버튼을 같은 페이지에서 동시에 로드했을 때 FOUT/FOIT와 LCP를 함께 봐야 합니다.

font-family Inter + fallback

Google Fonts, CDN, 셀프 호스팅마다 캐시·서브셋·라이선스 조건이 다릅니다.

[object Object]

UI sans + monospace 혼합

API 응답 예시
GET /v1/fonts?lang=ko → 200 OK

UI card IBM Plex Sans KR · 14px title

개발자 문서·설정 화면은 UI sans와 monospace를 별도 패밀리로 페어링하는 경우가 많습니다.

웹폰트 적용 전 결정 사항

  • 호스팅: Google Fonts CDN vs jsDelivr Pretendard vs self-host /public/fonts/
  • 굵이: UI면 400·500·600·700만 — 100–900 전부 로드 지양
  • Variable vs Static: Pretendard Variable 1파일 vs 굵이별 woff2 4개 — 트래픽·캐시 전략
  • Subset: ko + latin, punctuation — glyphcount·파일 크기 trade-off
  • font-display: swap(텍스트 즉시) vs optional(느린 네트워크 fallback 유지)
  • 라이선스: OFL self-host OK — CDN ToS·대역width·앱 WebView 번들 별도

한글 웹폰트 CSS 패턴

  • font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
  • font-family: "Noto Sans KR", sans-serif — Google Fonts link + display=swap
  • bilingual: Inter, Pretendard, sans-serif — 영문 UI 비중 높을 때
  • @font-face { font-weight: 400 700; font-display: swap; unicode-range: U+AC00-D7A3... }
  • preload: <link rel="preload" href="/fonts/pretendard.woff2" as="font" crossorigin>
  • next/font/local 또는 @fontsource로 빌드 타임 최적화

성능·UX 체크

  • Lighthouse: font-display, preload, unused weight 제거 후 LCP 비교
  • FOUT/FOIT: swap 시 fallback→webfont 전환 깜빡임 — size-adjust fallback(@font-face)
  • 모바일 3G: variable 1파일 vs 400+600 2파일 중 더 빠른 쪽 측정
  • CLS: webfont 로드 전후 H1 높이 변화 — line-height·min-height 고정
  • 다국어: /en은 Inter only, /ko는 Pretendard — route별 font 로드 분리
  • 캐시: woff2 filename hash, CDN cache-control 1y + immutable

자주 쓰는 한글 웹폰트 후보

  • Pretendard: variable, self-host·CDN, UI 범용 — OFL
  • Noto Sans KR: Google Fonts, 안정적 — 파일 크기 큼, 굵이 선택 로드
  • SUIT: 약간 compact, dashboard — 웹 CDN 또는 static
  • IBM Plex Sans KR: B2B — Plex 세트
  • Gothic A1: Google Fonts, 가벼운 고딕
  • Spoqa Han Sans Neo: 레거시 SaaS — CDN 문서 확인

웹폰트 도입 5단계

  1. 필요 굵이(400·600·700 등)와 bilingual 필요 여부(Inter 추가)를 정한다.
  2. Fonts 탭에서 후보 미리보기 → Licenses에서 self-host·CDN 임베딩 허용 확인.
  3. 로컬에서 woff2 subset 빌드(glyphhanger 등) 또는 variable 1파일로 Lighthouse 측정.
  4. font-family 스택 + font-display + preload를 layout/global.css에 적용.
  5. ko/en 페이지, 3G throttling, dark mode에서 fallback 전환·CLS 재검증.

웹폰트 선택에 쓰는 기능

  • Fonts: CSS font-family 이름·출처 표시
  • Licenses: OFL self-host·CDN 조건
  • Similar: Noto Sans KR·Pretendard 대체 웹폰트
  • Pairs: 랜딩 히어로 bilingual 조합

관련 가이드