Blogger'a Google Fonts Nasıl Eklenir? (Adım Adım Rehber) (Blog Yazı Tipi Değiştirme)

 Google Fonts, blogunuzun tipografisini zenginleştirmenin ve okuyucu deneyimini (UI/UX) iyileştirmenin en etkili yollarından biridir. Doğru yazı tipleri, blogunuzun profesyonel görünmesini sağlarken, metinlerin okunabilirliğini artırır.

Bu yazıda, Blogger (Blogspot) sitenize Google Fonts üzerinden dilediğiniz yazı tipini nasıl ekleyeceğinizi ve yazı tipi boyutunu/kalınlığını nasıl ayarlayacağınızı tüm detaylarıyla ele alıyoruz.

1. Adım: Google Fonts Sitesinden Yazı Tipi Seçme

Öncelikle kullanmak istediğiniz yazı tipini belirlemeniz gerekir.

  1. Tarayıcınızdan Google Fonts adresine gidin.

  2. Arama çubuğunu kullanarak istediğiniz yazı tipini (örneğin Roboto, Poppins veya Open Sans) aratın.

  3. Beğendiğiniz yazı tipinin üzerine tıklayın.

  4. Karşınıza çıkan sayfada, kullanmak istediğiniz kalınlık (Weight) seçeneklerinin yanındaki "Select this style" (Bu stili seç) butonuna tıklayın.

    • Öneri: Normal (400), Medium (500) ve Bold (700) gibi farklı kalınlıkları seçmek tasarımda esneklik sağlar.

  5. Sağ üst köşede açılan panelde "Use on the web" başlığı altında yer alan kodu göreceksiniz.


2. Adım: Google Fonts Kodunu Blogger'a Eklemek

Blogger sitenizde Google Fonts'u kullanabilmek için Google'ın size verdiği bağlantı kodunu temanıza eklemeniz gerekir.

  1. Blogger panelinize giriş yapın ve sol menüden Tema (Theme) sekmesine tıklayın.

  2. Mevcut temanızın yanında bulunan Özelleştir butonunun yanındaki aşağı ok simgesine tıklayın ve HTML'yi Düzenle (Edit HTML) seçeneğini seçin.

  3. HTML kodları arasında <head> etiketini bulun (genellikle en üst kısımlardadır).

  4. Google Fonts panelinden kopyaladığınız kodu hemen </head> etiketinin üzerine yapıştırın.

Örnek Kod Yapısı:

<link href='//fonts.googleapis.com/css?family=FONTUN ADI' rel='stylesheet' type='text/css'/>

3. Adım: CSS ile Yazı Tipini Uygulamak

Fontu sitenize tanıttıktan sonra, CSS ile hangi alanlarda (örneğin post başlıkları veya ana metin) kullanılacağını belirtmelisiniz.

  1. Aynı HTML düzenleme ekranında herhangi bir boşluğa tıklayıp Ctrl + F tuşlarına basarak ]]></b:skin> kodunu aratın.

  2. Bu kodun hemen üzerine aşağıdaki CSS kodunu yapıştırın ve kendi yazı tipi adınıza göre düzenleyin:

/* Google Fonts Entegrasyonu */
body, .post-body, p {
    font-family: 'Poppins', sans-serif; /* Buraya seçtiğiniz font adını yazın */
    font-weight: 400;
}

h1, h2, h3, .post-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
3. Sağ üst köşede bulunan Kaydet (Save) simgesine tıklayarak değişiklikleri uygulayın.

S.S.S.

Soru: Blogumun hızı yavaşlar mı?
Cevap: Çok fazla yazı tipi stili eklemediğiniz sürece yavaşlama olmaz. İhtiyacınız olan sadece 2-3 farklı kalınlık (400, 500, 700 gibi) seçmek performansı korur.


Soru: Farklı dillerdeki karakterler (Türkçe karakterler) sorun olur mu?
Cevap: Google Fonts kütüphanesindeki modern fontlar genellikle Türkçe karakterleri destekler. Özel bir durum varsa yazı tipi ayarlarından Latin Extended seçeneğini işaretleyebilirsiniz.

Hiç yorum yok:

Yorum Gönder