WordPress Özel Font Desteği (@font-face)

Wordpress Özel Font Desteği @font-face özelliği

Karşınızda yine wordpress’in nimetleriden yararlanmaya geldik, tabi başka script veya statik sitelerdede kullanabilirsiniz ama ben wordpress’ten yola çıkıyorum çünkü en çok yabancı arkadaşların worpdress için yaptığı @font-face destekli fontlar kullanılıyor.

Normalde @font-face css2 ile gelmişti fakat sağolsun browser’lerin çatışmasından nasibini aldı, çünkü explorer yine herzamanki gibi sıçıyordu, halen anlamış değilim zaten millet neden o dandik explorer’i kullanır. Sonra CSS3 ile tekrar yerini buldu, bu fontlar sayesinde normal arial vs.. herzaman gördüğümüz font formatından ayrılmış oluyoruz ve gözümüze daha güzel font stilleri geliyor ve o site gözümüze daha hoş geliyor, muhtemelen sizinde amacınız budur ki bu konuyu okuyorsunuz.

Bu kadar fazla format oluşu can sıkıcı gibi görünse de bunların arasına yeni katılan ve W3C tarafından standart font formatı haline gelen Web Open Font Format ya da diğer adıyla .WOFF bizim yardımımıza koştu. Firefox bu formatı 3.6 sürümünden, Chrome 5.0 sürümünden ve Internet Explorer da 9. sürümü ile beraber desteklemeye başladı. Opera ve Safari de herzaman olduğu gibi bu olaya dahil oldular.

Öncelikle sizlere avantaj ve dejavantajlarını söyleyimde sonra yok ben duymadım, yok ben bilemedim demeyin.

Avantajları

  • Erişilebilir.
  • Unicode desteği var.
  • CSS ile sorunsuz şekilde stil verilebilir.

Dezavantajları

  • Bazı fontların dosya boyutları büyük olduğu için yüklenmeleri azda olsa zaman alır.
  • Tüm tarayıcıların ortak olarak desteklediği bir format bulunmuyor.
  • Çoğu font anti-aliasing sorunu yaşatabilir. (Fon kenarlarını yumuşatma)
  • Dağıtım izni yoktur, yani; özel font kullanarak tasarladığınız bir websitesini, fontun Distribution License’ını satın almadan bir başkasına üzgünüm ama satamazsınız.

Şimdi siteyi paylaşıcam ve ayarların püf noktasını göstericem,

Öncelikle seçeceğimiz fontlarda türkçe bir site kullanacaksanız, türkçe harfleri desteklesin.

Site: Font Squirrel sitesine giriyoruz tabi elimizde font yoksa dafont.com dan türkçe destekli beğendiğiniz bir fontu bilgisayarınıza indirin.

Tasarımınızda kullanmak istediğiniz fontu : Create Your Own @font-face Kits

@font-face Generator yazısına tıkladıktan sonra hemen font yüklemeyin EXPERT alanına bir çeltik koyun ve aşağı indiğinizde Subsetting: Custom Subsetting… alanına çeltik atın ve Language: bölümünden Turkish alanını işaretleyin ki türkçe harflerinizde herhangi bir sorun oluşmasın.

Sonra yukarı çıkıp +Add Fonts butonuna tıklayıp pc’nizden fontu yükleyin. Yükledikten sonra o ayarların en aşağısında “Yes, the fonts I’m uploading are legally eligible for web embedding. Font Squirrel offers this service in good faith. Please honor the EULAs of your fonts.” yazısına bir çeltik kondurun ve devamında Download Your Kit butonuna tıklayın.

Bilgisayarınıza inen sıkıştırılmış dosyayı çıkartın ve içerisindeki .eot, .ttf, .woff, .txt’ uzantılı sayfaları wordpress dizinindeki tema adı /images/ dizininde “fonts” adında yeni bir klasör oluşturup buranın içine atın.

Sonra temanızdaki style.css sayfasının en aşağısına veya body’e verilen css’ten sonraki alana inen dosyanın içindeki stylsheet.css’in içindeki

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

buna benzer yazıyı istediğiniz bir yere yapıştırın.

Not: src: url veya url yazan alanların ismi direk çekilmiş oluyor yani anadizinde olarak varsayıyor eğer biz bu dosyaları temamız içinde “images/font” klasörünün içine attıysak bu sefer url(‘images/fonts/jennasue-webfont….’)

gibi yani önüne images/font koyacaksınız ki fontların nerde olduğunu bulsun 4 url alanı var hepsinin önüne aynı şekilde koyarsınız.

/*
font-family: 'JennaSueRegular'; alanındaki 'JennaSueRegular' yazısına kısaltma koyabilirsiniz, örneğin 'jsr'olarak değiştirebilirsiniz
*/

ve yukarıdaki kısaltma isleminizide kafanız eserse yaparsınız, artık bu fontu nerde tanımlamak istiyorsanız, örnek veriyorum;

.kategoribaslik h1 {font-family:jsr;}

yani arial vs.. nasıl çağırıyorsak kısa isimle çekiyoruz ve özel fontunuz artık sizindir. Güle güle kullanın umarım anlamışsınızdır, sorun olursa yazın burdayım, hmm bu arada belirtmek isterim bukadar zaman harcadım yazıya eğer kullanıyorsanız bir teşekkür falan edinde kaç insan var görelin demi 🙂 hadi iyi çalışmalar.