Eki 182014
 
2.247 views

WordPress Temasına Google Fontlar Nasıl Uygulanır?

Diyelim ki WordPress temalarından TwentyFourteen kullanıyoruz.

Yöntemlerden biri doğrudan ana temanın style.css ve header.php dosyalarına müdahale edip gerekli kodları oraya girmektir. Ancak bu durumda, orijinal kodları değiştirdiğimiz için herhangi bir güncelleme veya yükseltme durumunda bizim girdiğimiz kodlar otomatikman silinecektir.

Bunun çözümü ise, “child theme (yavru tema)” mekanizmasından yararlanmaktır. Bu yöntemde, orijinal dosyalara hiç dokunmayız. Gerekli değişiklikleri “yavru tema” alanında yaparız. Ana sistemde yapılan güncelleme ve yükseltmeler bizim özgün çalışmalarımızı hiç etkilemez.

TwentyFourteen teması “Lato” fontunu kullanır. Bu font Türkçe karakterlerde bazan sorun çıkarabiliyor. Bu yüzden temamızdaki “Lato” fontu yerine “Roboto” kullanmak istersek neler yapmamız gerektiğini birlikte inceleyelim.

Öncelikle yavru temamızın (child theme) style.css dosyasını açalım ve şu kodu içine ekleyelim:

body,
button,
input,
select,
textarea {
color: #2b2b2b;
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}

Yukarıdaki css kodunu, TwentyFourteen temasının orijinal style.css dosyasından aldık. Yaptığımız tek değişiklik, Lato yerine Roboto yazmaktır. Böylece sisteme, body, button, input, select ve textarea nesnelerinde Roboto fontunu kullanmak istediğimizi belirtmiş olduk. Font adı dışındaki diğer özelliklere hiç dokunmadık.

Ancak bu fontun nereden yüklenmesi gerektiğini de belirtmemiz lazım. İstersek header.php dosyasının bir kopyasını yavru tema klasörümüze kopyalayıp, gerekli kodu oraya ekleyebiliriz. Ancak bu durumda asıl temanın header.php dosyasında yapılabilecek zorunlu değişiklikleri peşinen riske atmış oluruz.

Çözüm, font yükleme işini ayrı bir fonksiyona yüklemektir.

Aşağıdaki kodu, bu kez yavru temamızın functions.php dosyasına ekliyoruz:

function load_fonts() {
wp_register_style(‘googleFonts’, ‘http://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext’);
wp_enqueue_style( ‘googleFonts’);
}

add_action(‘wp_print_styles’, ‘load_fonts’);

İşte bütün yapacaklarımız bu kadar. Artık yavru temamızın yüklü olduğu sitedeki ana font Lato değil, Roboto’dur.

TwentyFourteen temasının orijinal dosyalarına hiç dokunmadık.

Eğer siz de sitenizde TwentyFourteen temasını kullanıyorsanız ve fontlarla oynamak veya temanızın başka bir takım yerlerini değiştirmek istiyorsanız, hemen bir yavru tema kurmanızı öneriyorum. Hayatınız kolaylaşacaktır!

Başka temalarda da aynı yöntemi kullanabilirsiniz. Ek olarak yapmanız gereken şey, sizin ana temanızda kullanılmakta olan temel fontun adını öğrenmek ve yukarıda tarif ettiğimiz değişiklikleri o fontla ilgili kısımlara uygulamaktır.

Soru veya önerilerinizi yorumlar bölümüne ekleyebilirsiniz.

ahmet aksoy

 Kaynak: http://webdesignfromscratch.com/wordpress/using-google-web-fonts-with-wordpress-the-right-way/

 

Eki 182014
 
9.833 views

Google Türkçe Fontlar

Google, fontlar konusunda da öncülük etti ve ücretsiz paylaştığı font sistemini duyurdu. Bu fontların bazılarında hala yeterli Türkçe karakter desteği yok. Ancak Türkçe karakter sorunu çözümlenmiş fontların sayısının da zaman içinde artacağını umuyorum.

Google fontları, https://www.google.com/fonts  adresinde yayınlanıyor.

İstediğiniz fontları bu sayfadaki örneklerden görerek seçebilirsiniz. Script tipini “Latin Extended” olarak belirlerseniz, Türkçe karakterlerin sorunsuz olduğu yüzlerce fonta ulaşabilirsiniz. Emin olmak için Sentence ve Paragraph bölümlerindeki Preview Text alanına [Enter your own text] bölümünden bütün Türkçe karakterleri içeren örnek bir metin girin. Fontları bu örnek metin aracılığıyla görsel olarak denetleyin.

Buradaki fontları dilerseniz kendi bilgisayarınıza indirebilir, ya da gerekli yerlerde ilgili fontun erişim linklerini kullanabilirsiniz.

İndirmek istediğiniz fontları Add to Collection butonuna basarak gruplayın. Sonra da ekranın sağ üst tarafındaki küçük aşağı yönlü oka (  ) tıklayın.

Eğer amacınız seçtiğiniz fontları sadece web sitenizde kullanmak ise, onları bilgisayarınıza indirmeniz gerekmiyor. O fontla ilgili olarak sitenize ekleyeceğiniz bilgilere sağa bakan küçük ok butonuna basarak (  ) erişebilirsiniz.

Örneğin “Roboto” fontunu sitenizde kullanmak istediniz. O fontun yer aldığı kutu içindeki aşağı bakan oka (  ) tıklayın.

Açılan yeni pencerede ilk önce Roboto fontunun gösterim yoğunluğu listesi karşınıza çıkacak. Burada Normal 400 ve Bold 700 işaretledik diyelim.

İkinci sırada hangi dil ailesini kullanacağımızı seçmemiz gerekir. Türkçe karakterler için Latin Extended seçmemiz gerekir. Ayrıca Latin grubunu da işaretleyelim.

Üçüncü sırada, yaptığımız seçimlere göre web sitesine eklememiz gereken kod listelenir. Yukarıda belirttiğimiz seçimler için oluşan kod şöyledir:

<link href=’http://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext’ rel=’stylesheet’ type=’text/css’>

Import bilgisi:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext);

CSS dosyasında kullanılacak kod ise şu şekildedir:

font-family: ‘Roboto’, sans-serif;

Artık Roboto fontunu gönül rahatlığıyla websitenizde kullanabilirsiniz.

Türkçe karakterleri sorun yaratmayan fontlardan bazıları şöyle:

  • Open Sans
  • Roboto
  • Oswald
  • Roboto Condensed
  • Pt Sans
  • Source Sans Pro
  • Open Sans COndensed
  • Ubuntu
  • PT Sans Narrow
  • Roboto Slab
  • Arimo
  • Lora
  • Titillium Web
  • Dosis
  • Noto Sans
  • Oxygen
  • PT Serif
  • Francois One
  • Play
  • Playfair Display
  • Inconsolata
  • Poiret One
  • Ubuntu COndensed
  • Bree Serif
  • Libre Baskerville
  • Archivo Narrow
  • Cuprum
  • Josefin Sans
  • Karla
  • Exo 2
  • Anton
  • Noto Serif
  • Hammersmith One
  • Merriweather Sans
  • Pt Sans Caption

Gözden kaçırdığım bazı fontları da sizler ekleyebilirsiniz. Ancak “Latin-extended” özelliğini lütfen gözden kaçırmayın. Yoksa Türkçe karakterleriniz sağlıklı görünmeyebilir.

ahmet aksoy