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

구글 한글 폰트

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

실제로 이렇게 보입니다

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

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