Bunların yanı sıra Google’ın Web Fonts hizmeti ile ücretsiz olarak dağıtılan fontları sitelerinizde kullanabilirsiniz. Bunun için tek yapmanız gereken burada anlatıldığı gibi sitenize Google tarafından sağlanan CSS bağlantısını eklemek.

Yine benzer bir hizmeti ücretli olarak zengin bir font kütüphanesine sahip olan Typekit ile de alabilirsiniz. Ancak bu yöntemlerin ortak sıkıntısı ise genellikle Türkçe karakterleri barındırmaması.

Peki bu meselenin başka bir çözümü yok mu?

Bu meselenin çözümü kendi fontlarımızı tüm tarayıcılarda uyumlu formatlarını (ttf, svg, eot, woff formatları) oluşturduktan sonra CSS ile tanımlamak. Elimizde kullanmak istediğimiz font dosyası varsa bu formatları oluşturmak için online bir hizmet olan FontSquirrel‘e ait Font Face Generator servisini ücretsiz olarak kullanabiliriz.

Yukarıdaki ekranda Add Fonts butonuna tıklayarak kullanacağımız font dosyalarını seçtikten sonra kullanmak istediğimiz font’un kullanım haklarına sahip olduğumuza dair onay vererek font paketimizi oluşturup indirebiliriz.

Oluşturulan paketinin içeriğinde gerekli tüm tarayıcılar için gerekli formatta font dosyalarımız ve uygulamamızda kullanabileceğimiz CSS dosyamız oluşturulmuş halde bulunmaktadır.

Örnek CSS kodu:

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

Bu kodu CSS dosyamıza ekleyerek font dosyalarımızı da CSS’te belirttiğimiz konuma kopyaladığımızda artık sitemizde dilediğimiz gibi kendi fontumuzu kullanabiliriz.

Örnek kullanım:

body{
font-family: 'MetaRegular';
}

Kolay gelsin

Bu uyumluluk sorunlarının başında ise Internet Explorer ve W3C standartları’nda farklı yorumlanan CSS Kutu Modeli yer alıyor. Kutu Modeli hakkında daha fazla bilgiye Fatih Hayrioğlu‘nun CSS Dersleri’nden ulaşabilirsiniz. Biz burada sadece Internet Explorer ve W3C standartlarında kutu modelinin sayfada nasıl yorumlanacağı ve görüneceğine bakacağız.

W3C standartlarında Kutu Modeli yukarıdaki gibi yorumlanmaktadır. Yani modelimize vereceğimiz genişlik değeri (width) bizim kutumuzda yer alacak içeriğin genişliği olurken vereceğimiz iç boşluk (padding), dış boşluk (margin), ve kenarlık (border) genişlikleri width değerine eklenecek ve sayfamızda kapalayacağı toplam genişlik verdiğimiz değerlerin tümünün toplamına eşit olacaktır.

Internet Explorer ise Kutu Modellerini bu şekildeki gibi yorumlamaktadır. Kutumuza vereceğimiz genişlik değeri sadece içerik alanımızın genişliği değil aynı zamanda kenarlık ve iç boşluk genişliklerini de kapsayan bir değer olmaktadır. Sayfada kaplanan toplam alan ise belirttiğimiz width değeri ve dış boşluk (margin) değerlerinin toplamı olacaktır.

Ayrıca siz de bu işkencelerden daha çabuk kurtulmak istiyorsanız sitenizde Internet Explorer 6 kullanıcılarının göreceği bir mesaj yayınlayabilirsiniz. Aynen şurada anlatıldığı gibi

Şimdi de bu eseri anlatan kendi sözlerine yer verelim:

“Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslınada buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı; makalelerimin derlenip düzenli hale getirildiği bir e-doküman.

Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkanlar nispetinde 2. kitapta çıkacaktır.

Kitabı yazmaktan çok derlemek, bir düzene sokmak beni yordu, birde kelime ve cümle hataları. Biliyorum Dilbilgisi konusunda zayıfım Kitap içerisinde gördüğünüz hataları bildirirseniz en kısa zamanda düzeltmeye çalışacağım.

Umarım her kesin yararlanacağı bir Türkçe kaynak olur.”

Kitabı ve kaynak dosyalarını buradan indirebilirsiniz…