Lütfen destek için Facebook sayfamızı beğenin. Teşekkürler :) Kapat
Font Face Nedir? Wordpress'te Nasıl Kullanılır? | Skullcrusher | ORG
   
 
 

Font Face Nedir? WordPress’te Nasıl Kullanılır?

Cumartesi, 25 Haz 2011 Wordpress yorum ekle yorumlara git


   
Yorum ekleyin
  Facebook'ta paylaşın
  Twitter'da paylaşın


Selam arkadaşlar, bu konuda sizlere font-face’ten bahsedeceğim. Nedir, ne değildir, nasıl kullanılır, nasıl entegre edilir falan bu gibi konulara değineceğim. Öncelikle bu font-face olayının çok kolay bir iş olduğunu bilin. Kullanımı çok basit ve basitliğinin yanında oldukça işlevsel.

Peki font-face nedir?
font-face, CSS3 ile birlikte gelen ve yazı stillerinin yani fontların özgürce websitelerinde kullanılmasını sağlayan bir şey diyelim. font-face sayesinde websitenizde istediğiniz yazı tipini kullanabilirsiniz. İlla ki arial, verdana, tahoma vs. kullanmak zorunda değilsiniz.

Peki font-face özelliği nasıl kullanılır, WordPress’e nasıl enteğre edilir?
Öncelikle websitenizde kullanmak istediğiniz bir yazı tipini seçin. (eğer türkçe olmayan bir yaz tipi kullanmak istiyorsanız bu konu – http://www.skullcrusher.org/?p=1161 – yardımı ile türkçeleştirebilirsiniz.) Yazı tipinizi seçtikten sonra (“ABCDEFG.TTF” diyelim) bu dosyayı internet ortamında kullanılabilir hale getirmeniz gerekiyor. Bunun için online bir araç kullanacağız. http://www.fontsquirrel.com/fontface/generator sitesine gidin, seçtiğiniz yazı tipini siteye “Add Fonts” diyerek upload edin. Resimde görülen ayarlar genel ayarlardır değişiklik yapmanıza gerek yok sanırım. Ben bir sorunla karşılaşmadım. Daha sonra en altta bulunan “Download Your Kit” e basarak oluşturulan yeni yazı tipi dosyalarınızı indirin.

Font Face Nedir? WordPress'te Nasıl Kullanılır?


Dosyamızı indirdik, peki elimizde ne var?
İndirdiğimiz dosyanın içerisinden; 4 tane farklı formatta yazı tipi dosyası ve 1 adet CSS dosyası çıkıyor. Başka dosyalarda olabilir ama bizim işimize yarayacak olan dosyalar bu 5 dosya.

  1. ABCDEFG-webfont.eot
  2. ABCDEFG-webfont.svg
  3. ABCDEFG-webfont.woff
  4. ABCDEFG-webfont.ttf
  5. stylesheet.css

Bu değişik yazı tipi formatlarının her biri farklı tarayıcılar tarafından destekleniyor. Hangi formatın hangi tarayıcı tarafından desteklendiğini altta ki tabloda görebilirsiniz.

Font Face Nedir? WordPress'te Nasıl Kullanılır?Font Face Nedir? WordPress'te Nasıl Kullanılır?


Peki nasıl kullanılır?
Yazı tipi dosyalarımızın hepsini bir klasörün içerisine koyun (fonts mesela). Ardından fonts klasörünü …\wp-content\themes\temanız\fonts şeklinde yerleştirin. Sonra “stylesheet.css” dosyasını açın, içerisinde;


@font-face {
font-family: 'ABCDEFG';
src: url('abcdefg-webfont.eot');
src: url('abcdefg-webfont.eot?#iefix') format('embedded-opentype'),
url('abcdefg-webfont.woff') format('woff'),
url('abcdefg-webfont.ttf') format('truetype'),
url('abcdefg-webfont.svg#ABCDEFG') format('svg');
font-weight: normal;
font-style: normal;
}


tarzında bir kod var. Bu kodu aşağıdaki gibi dosya yolu kısımlarını (url satırlarını) düzenleyerek websitenizde kullanığınız “style.css” dosyanıza yapıştırın.


@font-face {
font-family: 'ABCDEFG';
src: url('fonts/abcdefg-webfont.eot');
src: url('fonts/abcdefg-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/abcdefg-webfont.woff') format('woff'),
url('fonts/abcdefg-webfont.ttf') format('truetype'),
url('fonts/abcdefg-webfont.svg#ABCDEFG') format('svg');
font-weight: normal;
font-style: normal;
}


kodları düzenleyip stil dosyanıza yapıştırdıktan sonra yazı tipiniz kullanıma hazır duruma gelmiş oluyor. Artık istediğiniz yerde font-family: ‘ABCDEFG’; tanımlamasını kullanarak yazı stilinizi değiştirebilirsiniz.

Örnek;


body {
font-family:ABCDEFG;
font-size:12px;
}


Hepsi bu kadar. Dediğim gibi basit ve bir o kadar kullanışlı bir şey. Tasarımlarınızda size daha fazla esneklik sağlayacağına inanıyorum.

Kısa bir özet geçecek olursak;

  1. Yazı tipinizi seçin.
  2. Fontsquirrel ile gerekli dosyaları edinin.
  3. Dosyaları tema klasörünüze taşıyın.
  4. Kodları ve CSS dosyanızı düzenleyin.
  5. Ve kullanmaya başlayın. :)


Hepinize kolay gelsin. Görüşmek üzere, sağlıcakla kalın. ;)

Güncellemelerden anında haberdar olmak isterseniz yazıları
Rss , Twitter ya da Facebook ile takip edebilirsiniz. :)
  1. şimdilik yorum yok.
  1. şimdilik geri bağlantı yok