Google Fonts Viewer

Search and preview Google Fonts. Find the perfect font for your web projects and see how they look in real-time.

Font Search

Search or filter your desired fonts.

Show Korean fonts only

📚 Complete Google Fonts Guide

Learn how to effectively use Google Fonts

🎨🎨 What is Google Fonts?

Google Fonts is a free web font service provided by Google.

1,400+ open source font families
Free license for commercial use
Global distribution via fast CDN
Support for various languages and writing systems
Optimized for responsive web design

⚡⚡ How to Use Web Fonts

1. Using in 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. Applying in CSS

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

🚀🚀 Performance Optimization Tips

Use font-display: swap to prevent FOIT
Use preconnect to reduce DNS lookup time
Selectively load only needed font-weights
Limit character sets with subset parameter
Set up local font fallbacks

Optimized loading example:

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

📱📱 Responsive Typography

Settings for optimal readability across various devices:

/* 반응형 폰트 크기 */
.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 이상 권장

🎯🎯 Font Selection Guide

Recommended fonts by usage:

Body text: Noto Sans KR, Spoqa Han Sans
Headings: Noto Serif KR, Gowun Dodum
Code: Fira Code, JetBrains Mono
Decorative: Jua, Gamja Flower

Selection criteria:

Consistency with brand identity
Readability and accessibility
Multi-language support range
Loading performance

🔧🔧 Advanced Usage

Using 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);
}

Using 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); }

🛡️🛡️ Accessibility Considerations

Sufficient contrast ratio: WCAG 4.5:1 or higher
Proper line spacing: 1.4~1.6 recommended
Readable font size: minimum 16px
Dyslexia-friendly: consider OpenDyslexic etc.

Accessible CSS example:

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

🔍🔍 Debugging and Testing

Font loading verification:

Check font files in DevTools Network tab
Check actual applied fonts in Computed styles
Test font-display behavior

Performance measurement tools:

Google PageSpeed Insights
WebPageTest
Lighthouse font optimization checks

폰트 fallback 테스트:

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