wordpress-google-font

WordPress Google Font Yükleme , Sitenizi Fontlarla Şenlendirin

Websitenizin görüntüsü ve verdiği his, ziyaretçilerinizi sitenizde tutmak adına oldukça büyük önem taşımaktadır. Sitenizin içeriği görsel, medya veya text ile dolu olabilir. Textler az veya çok kullanılmış olsun, nerede kullanılacaksa özenle seçilmelidir. Tipografi, bir websitesinin hissiyatını yansıtmak için en önemli araçlardandır. Bu yazımda wordpress google font ekleme konusuna değineceğim.

Yerleşik fontlar tarayıcıda mevcut olan fontlardır ve style.css dosyası genelde textleri göstermek için bu fontlara erişir. Bu da, elinizde font varyasyonu bulunmaması ve sitenizin vasat bir görünümü olacağı anlamına gelir. Fakat bu şekilde olmak zorunda değil elbette. Sitenizin eşsiz ve harika bir görüntüsü olması için fontlar seçebilme şansınız var. Bazen font seçimi sitenin karakterini yansıtmanın yollarından biridir.

Font Seçimi

Birbirinden harika ve sitenizin teması ile uyumlu fontlara ulaşmanızın birden çok yolu var, Fontsquirrel ve Dafont bunlardan sadece ikisi. Bazen websitenizin teması default fontlarla gelir ve bu fontlar sitenizin genel ruhuna uymayabilir bu yüzden font seçimini bu tarz sitelerden yapmanız gerekebilir.

Font seçimi yaparken ziyaretçilerinizin hedef kitlesini ve sitenizin ruhunu göz önüne alarak bir seçim yapın. Örnek verecek olursam, bir kreş sitesinin fontu çocukların el yazısı tarzında bir font olabilir. Birden fazla farklı font kullanacak olursanız, biri kalın biri ince gibi zıt fontlar kullanmaya çalışın, herşeyden önemlisi seçtiğiniz fontun okunaklı olması lazım.

İlginizi Çekebilir  Wordpress Metin Editörü Eklentisi : TinyMCE Advanced . Gelişmiş Metin Editörü

Mevcut temanıza Google fontları eklemek aslında iyi bir fikir olmayabilir, çünkü bu işlemi yaparken temanız tarafından sağlanan filtreleri google fontlara eklememiz gerekecek. Ancak Google’ın her geçen saniye genişleyen ve düzenli güncellenen bir font kitaplığı var, bunu belirtmemde de fayda var.

Fontunuzu seçtikten sonra fontu eklemenin birkaç farklı yolu var;

Bu yöntemde fontu indirip servere yüklüyorsunuz. Bu da site açılma hızını yavaşlatabiliyor.
Bu yöntem ise script oluşturup dış scriptleri sitenize yönlendirme şeklinde.
3. ve en kolay yöntem ise eklenti kullanarak google font yükleme.

Kod Kullanarak WordPress Google Font Ekleme

Bu metodda temayı biraz düzenlemeniz gerekecek bu yüzden child theme üzerinden çalışmakta fayda var.

Google Font sayfasını açın, font seçeneklerine bakın, hoşunuza giden bir font bulduğunuzda sağ alt kısımdaki  “Add To Collection” butonuna tıklayın. Ben ” Dancing Scripts” fontunun 400 ve 700 genişlikte olanlarını seçtim. Siz daha fazla font stili seçebilirsiniz, unutmayın her bir stil yükleme süresini uzatacaktır.

wordpress google font ekleme

Sonrasında ekranın alt kısmından bir pop-up pencere açılacak ve seçtiğiniz tüm font stilleri burada görünecek.

Sonrasında ekranın sağ alt kısmında beliren ” Use ” butonuna tıklayın. Bir başka sayfa açılacak ve bu sayfada fontların kalınlığını seçebileceksiniz. Sayfanın sağ tarafında bir hız ibresi var. Bu ibre seçtiğiniz fontların, font kalınlıklarının sayfa yükleme hızına etkisini gösteriyor. Birden fazla seçim yaptıysanız hepsinin toplam etkisini gösterir.

İlginizi Çekebilir  Wordpress SSL Kurulumundan Sonra 404 Hatası Sorunu ve Çözümü

Sayfanın alt kısımlarında 3 tane tab var, Standart, Import ve Javascript olarak. Bu tablardaki seçeneklerden birisini websiteniz için seçebilirsiniz.

Import tabının altında seçtiğiniz fontun adı geçen bi kod göreceksiniz.

@import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700);

Bu kodu kopyalayarak , temanızın style.css dosyasına kolayca yapıştırabilirsiniz. Bu yöntem kolay bir yöntem olmasına rağmen siteyi yavaşlatma gibi bir dezavantajı vardır. Çünkü önce font yüklenir sonra geri kalan içerik yüklenir.

Sitenize Google font eklemenin daha iyi bir yolu ise Standart tabının altındaki kodu kullanmaktır.

google fonts standart

Bu kodu doğrudan header.php dosyasına yüklemek her zaman sonuç vermeyebilir, ayrıca parent tema diye adlandırdığımız ana temada değişiklikler yapmak tavsiye edilmez,  bir sonraki güncelleme yaptığını değişiklikler gidebilir. Bu yüzden child temanın functions.php dosyalarının düzenlemenmesi daha doğrudur.

functions.php dosyasına şu kodları ekledikten sonra dosyayı kaydedin :

function load_fonts() {
wp_register_style('googleFonts',
'http://fonts.googleapis.com/css?family=Dancing+Script:400,700');
wp_enqueue_style('googleFonts');
}
add_action('wp_enqueue_scripts', 'load_fonts');

Bu düzenleme ile birlikte kod temanızın header bölümüne eklenmiş olacak.

Son bir adım kaldı, Google Fontların CSS entegrasyonu.

google font entegrasyonu

Temanızın style.css dosyasını açın ve şunun gibi olan kodları ekleyin :

body {
font-family: 'Dancing+Script' , sans-serif;
font-size: 14px;
color: #191919;
}

Sonrasında dosyayı kaydedin.

Bu işlemden sonra sitenizin seçtiğiniz font ile güncellenmiş olduğunu göreceksiniz.

Eklenti ile WordPress Google Font Ekleme

En başta da bahsettiğim gibi siteye google font eklemenin bir diğer yolu da eklenti kullanmaktır. Bunun  için bazı eklentiler mevcut ancak fontların özenle seçilmesi gerekmekte çünkü her font her klenti ile uyuşmayabilir, css düzenlemesi yapmak gerekebilir.

İlginizi Çekebilir  Ruby on Rails ile Yapılmış Siteler , Rails ile Geliştirilmiş En İyi 10 Site

– WordPress Google Font Eklentisi

Google font Eklentimiz Wp Google Fonts eklentisi , gerekli fontları siteye ekler. Eklenti, google fontları iki farklı yolla ekleyebilir:

  • Admin panelinden site için Google Fontların css’lerini atayabilirsiniz.
  • Ya da temanın kendi stilleri içerisinde çalışabilirsiniz.

– Easy Google Fonts

easy google font eklentisi

Bir diğer eklenti olarak da Easy Google Fonts eklentisini önerebilirim. Eklenti WordPress düzenleyicisine entegredir ve özel fontlar ekleyip önizlemenizi sağlar. Fontları ve varyasyonlarını herhangi bir kod bilgisi gerektirmeden ekleyebilirsiniz. Fontların herhangi bir görünümü düzenlenebilir, renk, punto vb. vb.

Eklentinin bir diğer avantajı da temanın stil dosyalarını düzenlemediğiniz için güncellemelerde düzenleme kaybı yaşanmayacak olmasıdır.

Şimdiye kadar 200.000+ kez indirilen eklentinin puan ortalamasının 4.9 olması da kalitesini gösteriyor.

Sonuç olarak, wordpress sitenize nasıl google font yükleyeceğinizin 3 farklı yolunu öğrenmiş oldunuz. Ancak şunun altını tekrar çizmek istiyorum, ne kadar fazla varyasyonlu font yüklerseniz sitenizin açılış hızı o kadar düşer o yüzden minimum tutmakta fayda var.

Buradaki yazımdan WordPress Öne Çıkan Görsel Hatası çözümüne ulaşabilirsiniz.

M.Fevzi Çelik

M.Fevzi Çelik

Seo geek by day, blutbad by night.

Bir yorum yap


Hakkında

Dijital Pazarlama Trendleri, Yeni Teknolojilerle ilgili haberler ve birtakım bullshit.

520+ Abone Arasına Katıl !