@font-face kullanımı

15 Nis 2010 tarihinde eklendi. Blog | 3 yorum

Daha önce “Yeni nesil web tasarımcı olmak” başlıklı makalemde de bahsettiğim üzere, web sitelerimizde standart sistem fontlarından farklı fontlar kullanmak için artık sIFR gibi Flash tabanlı scriptler kullanmak zorunda değiliz. CSS 3′ün bize hediye ettiği en güzel özelliklerden biri olan @font-face ile bu işin üstesinden çok kolay bir şekilde gelebiliyoruz. Ancak o makalede @font-face özelliğinin üstünde çok durmamıştım. Verdiğim örnek satırlar @font-face’in genel kullanımını temsil ediyordu. O haliyle kullandığınız zaman bütün tarayıcılarda aynı sonucu alamazsınız.

Ben de blogumda font-face kullanmaya başladığımdan olsa gerek, konu ile ilgili ayrıntılı bir makale yazmak istedim. (Blogumdaki font-face özelliğini görmeniz için tarayıcınızın geçmişini silmeniz gerekebilir.) @font-face’in bütün tarayıcılarda aynı sonucu alacak şekilde nasıl kullanılacağından bahsetmek istiyorum. @font-face’i doğru kullandığınız takdirde aşağıdaki tarayıcılarda düzgün çalıştırabilir ve istediğiniz fontları web sitenizde sorunsuz kullanabilirsiniz:

Safari 3.1+
Opera 10+
Firefox 3.5+
Chrome 4.0+
Internet Explorer 6+

Bütün tarayıcılarda @font-face kullanımı

Font dosyalarınızın bir arada düzgün bir şekilde bulunmasını sağlamak için ilk yapacağınız şey, sunucunuzda “fonts” klasörü oluşturmak olsun. Fontlarınızı bu klasöre kopyaladıktan sonra aşağıdaki satırları CSS dosyanıza yerleştirin. Font seçerken, türkçe karakterleri destekliyor olduğuna dikkat etmelisiniz. Yoksa türkçe karakterleri sistem fontu olarak gösterir. Bunun da pek hoş bir görüntü oluşturduğunu söyleyemem. Gelelim @font-face satırlarına…

@font-face { /* declare fonts */
    font-family: "MuseoLight";
    src: url("fonts/Museo300-Regular.;feot");
    src: local("Museo 300"), local("Museo-300"),
        url("fonts/Museo300-Regular.woff") format("woff"),
        url("fonts/Museo300-Regular.otf") format("opentype"),
        url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
        }

@font-face { /* declare fonts */

font-family: "MuseoLight";

src: url("fonts/Museo300-Regular.;feot");

src: local("Museo 300"), local("Museo-300"),

url("fonts/Museo300-Regular.woff") format("woff"),

url("fonts/Museo300-Regular.otf") format("opentype"),

url("fonts/Museo300-Regular.svg#Museo-300") format("svg");

}

Fontları çağırdığınız bağlantı yollarının doğru olduğundan emin olmalısınız. Bu satırlarda örnek olarak kullanılan MuseoLight font ailesini istediğiniz gibi değiştirebilirsiniz.

Daha sonra da bu fontu sitenin neresinde kullanacaksanız, CSS dosyasına bu özelliği aşağıdaki gibi tanımlamanız yeterli olur.

        h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
        h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
        h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }

h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }

h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }

h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; }

@font-face’in bütün tarayıcılarda düzgün çalışacak şekilde kullanımı bu kadar basit aslında.

Fark ettiğiniz üzere, bir fontu kullanabilmek için birden fazla font uzantısı kullanmamız gerekiyor. Bunun sebebi en çok kullanılan font uzantısı olan TTF’nin bütün tarayıcıların bütün versiyonları tarafından desteklenmiyor olması. Hatta Internet Explorer yine yapacağını yapıyor ve hiç bir versiyonunda TTF uzantısını desteklemiyor. Aşağıdaki tabloda hangi font uzantılarının hangi tarayıcılar ve versiyonlar tarafından desteklendiğini görebilirsiniz.

Font uzantılarını değiştirme

İsterseniz font uzantılarını birbirine çeviren ücretsiz programları indirip kullanabilirsiniz. Ama TTF uzantısını font-face’de kullanılan bütün uzantılara çevirebilen bir o kadar çok online araç varken, program indirmekle uğraşmanıza gerek yok. Bunların bana göre en iyisi fontsquirre, bu işin başarıyla üstünden geliyor.