toolsmoah

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.
Roboto
sans-serif•18 styles
Open Sans
sans-serif•12 styles
Noto Sans JP
sans-serif•9 styles
Montserrat
sans-serif•18 styles
Inter
sans-serif•18 styles
Poppins
sans-serif•18 styles
Lato
sans-serif•10 styles
Material Icons
monospace•1 styles
Roboto Condensed
sans-serif•18 styles
Roboto Mono
monospace•14 styles
Roboto
Sans-serif • 18 styles
Hello! Google Fonts Viewer. The quick brown fox jumps over the lazy dog. 1234567890
Get Code
Copy the code to apply fonts to your web projects.

Paste the above code inside the head tag of your HTML file.

📚 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;

💡💡 Practical Tips

Project setup:

  • Define font rules in design system
  • Establish font loading strategy
  • Configure fallback font stack
  • Set up performance monitoring

Maintenance:

  • Font version management
  • Clean up unused weights
  • Regular performance checks
  • Check for new font updates
    Google Fonts Viewer