toolsmoah

Google Fonts-Viewer

Suchen und Vorschau von Google Fonts. Finden Sie die perfekte Schriftart für Ihre Webprojekte und sehen Sie, wie sie in Echtzeit aussehen.

Schriftartensuche
Suchen oder filtern Sie Ihre gewünschten Schriftarten.

Wählen Sie eine Schriftart aus, um die Vorschau zu starten

📚 Vollständiger Google Fonts-Leitfaden

Erfahren Sie, wie Sie Google Fonts effektiv nutzen

🎨🎨 Was ist Google Fonts?

Google Fonts ist ein kostenloser Webfont-Dienst von Google.

  • Über 1.400 Open-Source-Schriftfamilien
  • Kostenlose Lizenz für die kommerzielle Nutzung
  • Globale Verteilung über schnelles CDN
  • Unterstützung für verschiedene Sprachen und Schriftsysteme
  • Optimiert für responsives Webdesign

⚡⚡ Wie man Web-Schriftarten verwendet

1. Verwendung 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. Anwendung in CSS

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

🚀🚀 Tipps zur Leistungsoptimierung

  • Verwenden Sie font-display: swap, um FOIT zu verhindern
  • Verwenden Sie preconnect, um die DNS-Lookup-Zeit zu reduzieren
  • Laden Sie selektiv nur benötigte Schriftstärken
  • Begrenzen Sie Zeichensätze mit dem Subset-Parameter
  • Richten Sie lokale Schriftart-Fallbacks ein

Optimiertes Ladebeispiel:

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

📱📱 Responsive Typografie

Einstellungen für optimale Lesbarkeit auf verschiedenen Geräten:

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

🎯🎯 Leitfaden zur Schriftartenauswahl

Empfohlene Schriftarten nach Verwendung:

  • Fließtext: Noto Sans KR, Spoqa Han Sans
  • Überschriften: Noto Serif KR, Gowun Dodum
  • Code: Fira Code, JetBrains Mono
  • Dekorativ: Jua, Gamja Flower

Auswahlkriterien:

  • Übereinstimmung mit der Markenidentität
  • Lesbarkeit und Barrierefreiheit
  • Unterstützungsbereich für mehrere Sprachen
  • Ladeleistung

🔧🔧 Erweiterte Nutzung

Verwendung variabler Schriftarten:

/* 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);
}

Verwendung von 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); }

🛡️🛡️ Überlegungen zur Barrierefreiheit

  • Ausreichendes Kontrastverhältnis: WCAG 4.5:1 oder höher
  • Richtiger Zeilenabstand: 1,4~1,6 empfohlen
  • Lesbare Schriftgröße: mindestens 16px
  • Legasthenikerfreundlich: OpenDyslexic usw. in Betracht ziehen

Barrierefreies CSS-Beispiel:

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

🔍🔍 Debugging und Testen

Überprüfung des Schriftartenladens:

  • Überprüfen Sie die Schriftartdateien im Netzwerk-Tab der Entwicklertools
  • Überprüfen Sie die tatsächlich angewendeten Schriftarten in den berechneten Stilen
  • Testen Sie das Verhalten von font-display

Leistungsmesswerkzeuge:

  • Google PageSpeed Insights
  • WebPageTest
  • Lighthouse-Schriftoptimierungsprüfungen

폰트 fallback 테스트:

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

💡💡 Praktische Tipps

Projekteinrichtung:

  • Definieren Sie Schriftartregeln im Designsystem
  • Legen Sie eine Strategie zum Laden von Schriftarten fest
  • Konfigurieren Sie den Fallback-Schriftartenstapel
  • Richten Sie die Leistungsüberwachung ein

Wartung:

  • Schriftartversionsverwaltung
  • Bereinigen Sie ungenutzte Schriftstärken
  • Regelmäßige Leistungsprüfungen
  • Suchen Sie nach neuen Schriftart-Updates