WordPress Tema Yapımında Google Fontları Kullanma

WordPress tema kodlama yapıyorsanız temanızı gösterecek önemli etkenlerden biri de fontlardır.  Kullandığınız yazı tipleriniz ne kadar siteyle uyumlu olursa ziyaretçi sitenizi gezerken hoşnut kalacaktır. Ayrıca seçeceğiniz fontlar kullanıcıların gözlerini yormayacak şekilde olmalı ve okunabilirliği net olmalıdır.

Tema yaparken farklı fontlar denemek ve kendi temanıza en uygun fontu bulmak için çabalıyorsanız birçok fontu temanıza yükleyebileceğinizi unutmayın. Bunu fontun dosyasını temanıza oluşturacağınız bir font klasörüne atıp, css dosyanız ile çağırabilirsiniz. Bu yazımda bunun detaylarını aktarmaktan ziyade Google Font kısmından hoşumuza giden birkaç fontu nasıl temaya ekleyeceğimize değineceğim. Başka bir yazıda dışarıdan font ekleme kısmınıda anlatabilirim.

1- Google Fontlar sayfasına buraya tıklayarak giriyoruz. ve Açılan sayfada bulunan fontlar listeleniyor. Listeye göz atıp dilediğimizi seçebilir yada arama kutusuna arama gerçekleştirerek dilediğimiz fontu kullanabiliriz.

googlefontlar

2- Ben Open  sans fontunu ekleyeceğim. Bunun için arama kutusuna Open sans yazıyorum ve bu isimle alakalı fontlar karşıma geliyor. Ardından fontun üzerindeki kırmızı ekleme işaretinin üzerine geldiğimde font ile alakalı varyanslar karşımıza geliyor.googlefontlar-02

3- Burada dilediğimiz gibi fontu özelleştirip (varyansların altında önizleme mevcut) istediğimiz yazı tipine ulaştıktan sonra ekle butonuna basarak fontumuzu seçiyoruz. Ardından ekranın alt kısmında bir font family seçildi kısmına tıklayarak paneli açıyoruz.

googlefontlar-03

4- Açılan bölümde import‘a tıklıyoruz ve kullanacağımız CSS kodu karşımıza çıkıyor.

googlefontlar-04

5- @import ile başlayan kodu tema projemizin style.css dosyasının üst kısmına ekliyoruz. Artık seçip özelleştirdiğimiz fontu projemizde dilediğimiz gibi kullanabiliriz fakat kullanacağımız Tag’ın içerisine eklememiz gereken bir kod var;

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

Bu kodu ekledikten sonra sitenizin body tagı arasındaki bütün yazılar yeni oluşturduğunuz fontu kullanacak. Bu şekilde dilediğiniz kadar Google Fontlarda bulunan fontu projenize ekleyebilirsiniz.

Hakkında Tosahan

Üniversiteyi yeni bitirmiş, yeni bir şeyler bulma umuduyla internet ortamında kendini bulan, Wordpress aşığı, birkaç ay sonra askere gidecek kişiyim. Bazen 2 bazense 3 bilinmeyenli bir denklem olmayı sürdürsem de şu sıralar çok çabuk kırılan bir MSN şifresiyim :)

Cevapla

E-posta adresiniz yayınlanmayacak. Gerekli alanlar işaretlenmelidir *

*