@font-face Kullanımı ve Bilmeniz Gerekenler

@font-face Nedir?

@font-face yeni bir şey değil. Orijinal olarak CSS2 için önerildi ve orijinal olarak sürüm 5'ten beri Internet Explorer'da uygulandı. @font-face, belirli yazı tiplerinin, uzak kullanıcının sistemlerine yüklemesine gerek kalmadan bir web sitesine gömülmesine izin verir.

Elbette, geliştiriciler olarak herhangi bir yazı tipini kullanamayız, hangi yazı tiplerinin yasal olarak kullanılabileceğini dikkatlice düşünmeliyiz, çünkü bir web sayfasının parçası olarak uzak bir yazı tipini görüntüleme yöntemi, yazı tipi dosyasının kendisine serbestçe erişilmesine ve indirilmesine izin verir.

@font-face, temel olarak özelleştirilmiş font kütüphanelerini web sayfalarınıza dahil etmenize yarar. Aynı zamanda, ziyaretçinin bilgisayarında olmayan fontları web sayfanızda tanımlamak / kullanmak ve yorumlamak için de @font-face kullanmamız gerekiyor. @font-face kullanılmadan değerlendirilen fontlar kullanıcıların kullandıkları işletim sistemlerinde varsayılan olarak yüklenen fontlar aslında. Bunları zenginleştirmek, hazırlanan tasarımda kullanılan fontları kullanıcının tarayıcısında görebilmesini sağlayan bu niteliği kullanarak sizlerde dilediğiniz fontu sayfanıza dahil edebiliyorsunuz.

Ancak kullanımla alakalı yapılan hatalar ve fontların uygunsuz - standart dışı bir şekilde @font-face ile kullanım şekli her zaman doğru bir şekilde çıktı almanızı engelleyebilir. Bu durum için doğru seçilen font dosyaları ve font ailesinin formatı gerek site dili gerek ise, uygun formatın seçimi zaman zaman istenmeyen görünümlere davetiye çıkarabiliyor.

Tüm tarayıcılar @font-face destekliyor mu ?

Mobil ve modern tarayıcılar kendi formatlarını @font-face metodu içerisine tanımladığınız takdirde sorunsuz olarak destek sağlıyor. Bunun için bilmeniz ve dikkat etmeniz gereken bir kaç detay var.

• eot formatı : Internet Explorer 9 ve kompakt modlar için kullanılması gerekir.
• eot#iefix formatı : Her ne kadar günümüzde az yoğunlukta kullanılıyor olsa da IE 6 ve IE 8 için önemlidir.
• woff2 formatı : Süper modern tarayıcılar için tercih edilir.
• woff formatı : Modern tarayıcılar için gereklidir.
• tff formatı :  Safari , Android ve IOS için kullanılması şarttır.
• svg formatı : Eski sürüm IOS için bu format zorunludur.

Kullanılacak font ailesinin , üstteki formatlarının tamamına sahip olması tüm cihazlarda sorunsuz aynı görünüm için gereklidir. Ancak günümüzde, bir çok modern çalışmada tüm fontların ilgili formatlarını yüklemek yerine, bir ya da bir kaçının yüklenmesi haricinde kimse pek de bu durumla alakalı dikkatli davranmıyor diyebiliriz. Özellikle ttf uzantılı olan formatı kullanıyor olmak, (truetype dediğimiz format) neredeyse hatasız font çıktısını ziyaretçilerinize servis etmeniz anlamına gelir.