toolsmoah

Google Yazı Tipi Görüntüleyici

Google Yazı Tiplerini arayın ve önizleyin. Web projeleriniz için mükemmel yazı tipini bulun ve gerçek zamanlı olarak nasıl göründüklerini görün.

Yazı Tipi Arama
İstediğiniz yazı tiplerini arayın veya filtreleyin.
Roboto
sans-serif•18 stiller
Open Sans
sans-serif•12 stiller
Noto Sans JP
sans-serif•9 stiller
Montserrat
sans-serif•18 stiller
Inter
sans-serif•18 stiller
Poppins
sans-serif•18 stiller
Lato
sans-serif•10 stiller
Material Icons
monospace•1 stiller
Roboto Condensed
sans-serif•18 stiller
Roboto Mono
monospace•14 stiller
Roboto
Sans-serif • 18 stiller
Merhaba! Google Yazı Tipi Görüntüleyici. Hızlı kahverengi tilki tembel köpeğin üzerinden atlar. 1234567890
Kod Al
Yazı tiplerini web projelerinize uygulamak için kodu kopyalayın.

Yukarıdaki kodu HTML dosyanızın head etiketi içine yapıştırın.

📚 Google Yazı Tipleri Kılavuzu

Google Yazı Tiplerini etkili bir şekilde nasıl kullanacağınızı öğrenin

🎨🎨 Google Yazı Tipleri Nedir?

Google Yazı Tipleri, Google tarafından sağlanan ücretsiz bir web yazı tipi hizmetidir.

  • 1.400'den fazla açık kaynak yazı tipi ailesi
  • Ticari kullanım için ücretsiz lisans
  • Hızlı CDN aracılığıyla küresel dağıtım
  • Çeşitli diller ve yazı sistemleri için destek
  • Duyarlı web tasarımı için optimize edilmiştir

⚡⚡ Web Yazı Tipleri Nasıl Kullanılır

1. HTML'de Kullanım

<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'te Uygulama

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

🚀🚀 Performans Optimizasyon İpuçları

  • FOIT'i önlemek için font-display: swap kullanın
  • DNS arama süresini azaltmak için preconnect kullanın
  • Yalnızca gerekli yazı tipi ağırlıklarını seçerek yükleyin
  • Alt küme parametresiyle karakter kümelerini sınırlayın
  • Yerel yazı tipi yedekleri ayarlayın

Optimize edilmiş yükleme örneği:

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

📱📱 Duyarlı Tipografi

Çeşitli cihazlarda optimum okunabilirlik için ayarlar:

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

🎯🎯 Yazı Tipi Seçim Kılavuzu

Kullanıma göre önerilen yazı tipleri:

  • Gövde metni: Noto Sans KR, Spoqa Han Sans
  • Başlıklar: Noto Serif KR, Gowun Dodum
  • Kod: Fira Code, JetBrains Mono
  • Dekoratif: Jua, Gamja Flower

Seçim kriterleri:

  • Marka kimliğiyle tutarlılık
  • Okunabilirlik ve erişilebilirlik
  • Çok dilli destek aralığı
  • Yükleme performansı

🔧🔧 Gelişmiş Kullanım

Değişken Yazı Tiplerini Kullanma:

/* 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 Özel Özelliklerini Kullanma:

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

🛡️🛡️ Erişilebilirlik Hususları

  • Yeterli kontrast oranı: WCAG 4.5:1 veya daha yüksek
  • Uygun satır aralığı: 1.4~1.6 önerilir
  • Okunabilir yazı tipi boyutu: minimum 16 piksel
  • Disleksi dostu: OpenDyslexic vb. düşünün

Erişilebilir CSS örneği:

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

🔍🔍 Hata Ayıklama ve Test Etme

Yazı tipi yükleme doğrulaması:

  • DevTools Ağ sekmesindeki yazı tipi dosyalarını kontrol edin
  • Hesaplanan stillerde uygulanan gerçek yazı tiplerini kontrol edin
  • Yazı tipi görüntüleme davranışını test edin

Performans ölçüm araçları:

  • Google PageSpeed Insights
  • WebPageTest
  • Lighthouse yazı tipi optimizasyon kontrolleri

폰트 fallback 테스트:

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

💡💡 Pratik İpuçları

Proje kurulumu:

  • Tasarım sisteminde yazı tipi kurallarını tanımlayın
  • Yazı tipi yükleme stratejisi oluşturun
  • Yedek yazı tipi yığını yapılandırın
  • Performans izlemeyi ayarlayın

Bakım:

  • Yazı tipi sürüm yönetimi
  • Kullanılmayan ağırlıkları temizleyin
  • Düzenli performans kontrolleri
  • Yeni yazı tipi güncellemelerini kontrol edin
    Google Yazı Tipi Görüntüleyici