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

font

구글 한글 폰트

Google Fonts 한글도 UI·본문·제목 목적별로 골라야 합니다. Google Fonts는 `<link>` 한 줄로 OFL 웹폰트를 쓸 수 있어 라이선스가 비교적 명확합니다. 다만 Noto Sans KR full weight는 용량이 크고, Black Han Sans는 display 전용입니다. 본문·UI·제목·세리프를 구분하고 Inter·Roboto 등 영문과 bilingual stack을 Pairs에서 검증하세요.

Google Fonts 후보 비교 웹폰트 가이드

실제로 이렇게 보입니다

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

Google Fonts · Noto Sans KR

웹폰트 임베딩 · 400/700

Noto Sans KR
Google Fonts에서 제공하는 한글 sans. link 태그 한 줄로 시작하기 좋지만, 필요 굵기만 골라 로드하세요.

font-family Noto Sans KR + fallback

GF는 OFL/Apache 위주지만, 서브셋·variable font 지원 여부는 패밀리마다 다릅니다.

GF + 로컬 fallback

link 태그 + system-ui

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?
  family=Noto+Sans+KR:wght@400;700&display=swap"
  rel="stylesheet" />

body {
  font-family: "Noto Sans KR", sans-serif;
}

Pretendard·SUIT처럼 CDN 셀프 호스팅을 쓰는 경우에도 GF와 같은 체크리스트(굵기·라이선스·LCP)가 적용됩니다.

[object Object]

14px 본문 · 600 섹션 타이틀

배송 추적
송장번호 1234567890 · 도착 예정 5월 30일 (금)

UI card Gothic A1 · 18px title

Nanum Gothic, Gothic A1, Noto Sans KR을 GF에서 나란히 미리보기해 프로젝트 톤에 맞는 것을 고르세요.

Google Fonts 한글 대표 후보

  • Noto Sans KR: 범용 본문·UI — weights 100–900, subset link로 400;500;700
  • Noto Serif KR: 장문·에디터ial — 14–16px 본문, heading serif
  • IBM Plex Sans KR: B2B — Plex Mono 코드 세트
  • Gothic A1: 가벼운 sans — compact UI
  • Black Han Sans: display only — hero 32px+, body 금지
  • Nanum Gothic/Myeongjo: 레거시·친숙한 톤 — file size 확인

Google Fonts CSS 적용

  • <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
  • font-family: "Noto Sans KR", sans-serif;
  • bilingual: family=Inter:wght@400;600&family=Noto+Sans+KR:wght@400;700
  • text= param: 한글 subset URL — 필요 glyph만
  • preconnect fonts.googleapis.com + fonts.gstatic.com
  • self-host: google-webfonts-helper — OFL, CDN 의존 제거

Noto vs Pretendard vs self-host

  • Noto CDN: setup 빠름, cache 공유, weight subset 가능
  • Pretendard jsDelivr/self-host: UI tuning, variable, 한국 SaaS 표준
  • Lighthouse: Noto 400;700 vs Pretendard variable LCP 비교
  • fallback: Noto loading 중 system-ui → swap flicker
  • Licenses: 둘 다 OFL — logo·embed 원문 동일 계열
  • Similar: Noto Sans KR ↔ Gothic A1, Pretendard

영문 Google Fonts 페어링

  • Inter + Noto Sans KR — global product
  • Roboto + Noto Sans KR — Material 톤
  • Source Sans 3 + Noto Sans KR — document
  • Lora + Noto Serif KR — editorial bilingual
  • Pairs: Google pair preview 동일 layout
  • UI: 영문 menu Inter 500, 한글 Pretendard 혼용 시 baseline test

Google Fonts 한글 도입 4단계

  1. 역할(UI/body/display)과 필요 weight(400;600;700) 정의.
  2. Fonts에서 Noto·Gothic A1·IBM Plex 미리보기 → Similar 비교.
  3. Google fonts link + font-family + preconnect 적용, Lighthouse 측정.
  4. bilingual need 시 Inter 추가, Pairs hero 검증, Licenses OFL archive.

Google Fonts 탐색 기능

  • Fonts: Google Fonts 출처 필터
  • Licenses: OFL 요약·원문
  • Pairs: Noto + Inter 조합
  • Similar: Noto 대체 한글 sans

관련 가이드