Przeglądarka czcionek Google

Wyszukuj i podglądaj czcionki Google. Znajdź idealną czcionkę do swoich projektów internetowych i zobacz, jak wyglądają w czasie rzeczywistości.

Wyszukiwanie czcionek

Wyszukaj lub filtruj żądane czcionki.

Pokaż tylko czcionki koreańskie

Kategoria

Wybierz czcionkę, aby rozpocząć podgląd

📚 Kompletny przewodnik po czcionkach Google

Dowiedz się, jak skutecznie używać czcionek Google

🎨🎨 Co to są czcionki Google?

Czcionki Google to bezpłatna usługa czcionek internetowych świadczona przez Google.

Ponad 1400 rodzin czcionek open source
Darmowa licencja do użytku komercyjnego
Globalna dystrybucja za pośrednictwem szybkiego CDN
Obsługa różnych języków i systemów pisma
Zoptymalizowane pod kątem responsywnego projektowania stron internetowych

⚡⚡ Jak używać czcionek internetowych

1. Użycie w 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. Zastosowanie w CSS

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

🚀🚀 Wskazówki dotyczące optymalizacji wydajności

Użyj font-display: swap, aby zapobiec FOIT
Użyj preconnect, aby skrócić czas wyszukiwania DNS
Selektywnie ładuj tylko potrzebne grubości czcionek
Ogranicz zestawy znaków za pomocą parametru subset
Skonfiguruj lokalne fallbacki czcionek

Przykład zoptymalizowanego ładowania:

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

📱📱 Responsywna typografia

Ustawienia dla optymalnej czytelności na różnych urządzeniach:

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

🎯🎯 Przewodnik po wyborze czcionek

Zalecane czcionki według zastosowania:

Tekst główny: Noto Sans KR, Spoqa Han Sans
Nagłówki: Noto Serif KR, Gowun Dodum
Kod: Fira Code, JetBrains Mono
Dekoracyjne: Jua, Gamja Flower

Kryteria wyboru:

Spójność z tożsamością marki
Czytelność i dostępność
Zakres obsługi wielu języków
Wydajność ładowania

🔧🔧 Zaawansowane użycie

Używanie czcionek zmiennych:

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

Używanie niestandardowych właściwości CSS:

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

🛡️🛡️ Kwestie dostępności

Wystarczający współczynnik kontrastu: WCAG 4.5:1 lub wyższy
Właściwe odstępy między wierszami: zalecane 1.4~1.6
Czytelny rozmiar czcionki: minimum 16px
Przyjazne dla dysleksji: rozważ OpenDyslexic itp.

Przykład dostępnego CSS:

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

🔍🔍 Debugowanie i testowanie

Weryfikacja ładowania czcionek:

Sprawdź pliki czcionek w zakładce Sieć w Narzędziach deweloperskich
Sprawdź faktycznie zastosowane czcionki w stylach obliczonych
Testuj zachowanie font-display

Narzędzia do pomiaru wydajności:

Google PageSpeed Insights
WebPageTest
Kontrole optymalizacji czcionek Lighthouse

폰트 fallback 테스트:

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