Google Fonts 뷰어

Google Fonts를 검색하고 미리보기할 수 있는 도구입니다. 원하는 폰트를 찾아 웹 프로젝트에 적용해보세요.

폰트 검색

원하는 폰트를 검색하거나 필터링하세요.

한글 지원 폰트만 보기

카테고리

폰트를 선택하여 미리보기를 시작하세요

📚 Google Fonts 완벽 가이드

Google Fonts를 효과적으로 활용하는 방법을 알아보세요

🎨🎨 Google Fonts란?

Google Fonts는 구글에서 제공하는 무료 웹폰트 서비스입니다.

1,400개 이상의 오픈소스 폰트 패밀리
상업적 사용 가능한 무료 라이선스
빠른 CDN을 통한 전 세계 배포
다양한 언어와 문자 체계 지원
반응형 웹 디자인에 최적화

⚡⚡ 웹폰트 사용법

1. HTML에서 사용

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

2. CSS에서 적용

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

🚀🚀 성능 최적화 팁

font-display: swap 사용으로 FOIT 방지
preconnect로 DNS 조회 시간 단축
필요한 font-weight만 선택적 로드
subset 파라미터로 문자 집합 제한
로컬 폰트 fallback 설정

최적화된 로드 예시:

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

📱📱 반응형 타이포그래피

다양한 디바이스에서 최적의 가독성을 위한 설정:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}

모바일: 16px 이상 권장
태블릿: 18px 이상 권장
데스크톱: 20px 이상 권장

🎯🎯 폰트 선택 가이드

용도별 추천 폰트:

본문용: Noto Sans KR, Spoqa Han Sans
제목용: Noto Serif KR, Gowun Dodum
코드용: Fira Code, JetBrains Mono
장식용: Jua, Gamja Flower

선택 기준:

브랜드 아이덴티티와의 일치성
가독성과 접근성
다국어 지원 범위
로딩 성능

🔧🔧 고급 활용법

Variable Fonts 사용:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

CSS Custom Properties 활용:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ 접근성 고려사항

충분한 대비율: WCAG 기준 4.5:1 이상
적절한 줄 간격: 1.4~1.6 권장
읽기 쉬운 폰트 크기: 최소 16px
dyslexia 친화적: OpenDyslexic 등 고려

접근성 CSS 예시:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 디버깅 및 테스트

폰트 로딩 확인:

개발자 도구 Network 탭에서 폰트 파일 확인
Computed 스타일에서 실제 적용된 폰트 확인
font-display 동작 테스트

성능 측정 도구:

Google PageSpeed Insights
WebPageTest
Lighthouse 폰트 최적화 점검

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;