Google Fonts ile uyumlu font çiftleri bulun. Başlık ve gövde fontlarını canlı önizleyin, CSS kodunu kopyalayın.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Örnek gövde metni burada görünür.
Klasik ve zarif bir kombinasyon. Editoryal tasarımlar için ideal.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400&display=swap');h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
body, p, span, li {
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
}<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=Playfair+Display:wght@700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400&display=swap" rel="stylesheet">
Font eşleştirme, bir tasarımda birbirini tamamlayan iki veya daha fazla yazıtipini bir arada kullanma sanatıdır. Genellikle başlıklar için dikkat çekici bir font, gövde metni için ise okunaklı bir font seçilir. Doğru font çifti seçimi, web sitenizin profesyonel görünmesini ve içeriğinin rahatlıkla okunmasını sağlar.
Bu araç, Google Fonts kütüphanesinden özenle seçilmiş font çiftlerini sunarak tasarım sürecini hızlandırır. Her çift, tipografi prensipleri göz önünde bulundurularak seçilmiştir: kontrast, uyum ve okunabilirlik dengelenmiştir.
Font çifti seçerken nelere dikkat etmeliyim?
Başlık ve gövde fontları arasında yeterli kontrast olmalıdır. Aynı kategoriden (örneğin iki serif) font seçmek genellikle önerilmez. Bir serif + bir sans-serif kombinasyonu en güvenli seçenektir.
Google Fonts ücretsiz mi?
Evet, Google Fonts tamamen ücretsizdir ve açık kaynaklıdır. Ticari projelerinizde de serbestçe kullanabilirsiniz.
Fontlar sayfa hızını etkiler mi?
Evet, her ek font dosyası sayfa yüklenme süresini artırabilir. Bu yüzden en fazla 2-3 font ailesi kullanmanız ve sadece ihtiyacınız olan ağırlıkları yüklemeniz önerilir. display=swap parametresi kullanarak fontlar yüklenene kadar yedek fontların gösterilmesini sağlayabilirsiniz.
Bu araçtaki fontları nasıl kullanabilirim?
Beğendiğiniz font çiftini seçtikten sonra, sayfanın altında görünen CSS import kodunu veya HTML link etiketlerini projenize ekleyin. Ardından CSS kodundaki font-family tanımlarını kullanın.