Font Test ve Eşleştirme

Google Font eşleşmelerini, aralığı ve stilleri canlı gör.

Tipografi Kurulumu

Başlık Yazı Tipi

Gövde Yazı Tipi

Başlık Boyutu36px

Başlık Kalınlığı

Gövde Boyutu16px

Gövde Kalınlığı

Popüler Kombinasyonlar

Modern TechPoppins + InterKlasik EditöryelPlayfair Display + LoraKurumsal KalınMontserrat + Open SansTemiz MonospaceJetBrains Mono + RobotoSıcak HaberMerriweather + Lato

CSS Kod Dışa Aktar

/* CSS Integration */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;700&display=swap');

h1.custom-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 36px;
}

p.custom-body {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 16px;
}

Nasıl çalışır

Eşleştirip önizlemek için Google Fonts seçin.
Canlı, düzenlenebilir önizlemeye kendi metninizi yazın.
Tipografiyi test etmek için boyut, kalınlık ve aralığı ayarlayın.
Eşleştirmeyi projenizde kullanmak için CSS'i dışa aktarın.

Ne için kullanılır

Karar vermeden önce bir başlık/gövde yazı tipi eşleştirmesini denemek.
Gerçek metnin bir yazı tipinde nasıl göründüğünü önizlemek.
Bir Google Fonts eşleştirmesini gömmek için CSS almak.

Bilmekte fayda var

Yazı tiplerini Google Fonts'tan yükler, dolayısıyla bir yazı tipini önizlemek onu Google'dan getirir (bu aracın tam çevrimdışı olmadığı tek yer).
İşleme, işletim sistemleri ve tarayıcılar arasında hafifçe farklılık gösterebilir.

Sıkça sorulan sorular

Kendi metnimi kullanır mı?

Evet; önizleme düzenlenebilirdir, dolayısıyla yer tutucu metin yerine gerçek başlıkları ve paragrafları yapıştırabilirsiniz.

CSS'i alabilir miyim?

Evet; seçilen Google Fonts eşleştirmesini sitenize gömmek için CSS'i dışa aktarır.

Bu tamamen çevrimdışı mı?

Neredeyse; her şey tarayıcınızda çalışır, ancak bir Google Font'u önizlemek yazı tipi dosyasını Google'dan getirir. Yazdığınız hiçbir metin yüklenmez.

İlgili araçlar

DXF Görüntüleyici

Renk Paleti

Renk Dönüştürücü

CSS Kutu Gölgesi Oluşturucu

Kontrast Kontrolcüsü