Sitemizde özel yazı tiplerini kullanmak için kullandığımız @font-face bize çok güzel imkanlar sağladığı kesin. Bir sorunu var bu özelliğin kod bloku çok uzun ve karışık. Daha önce yazdığım font-face kullanımı yazısının üzerinden çok zaman geçti. Bir çok tarayıcı bu listeden düştü. En son ie8 düştü.
@font-face {
font-family: 'BenimYaziTipim';
src: url('GraublauWeb.eot'); /*ie 6-8 */
src: local('Graublau Web Regular'), local('Graublau Web'),
url('GraublauWeb.woff') format('woff'),
url('GraublauWeb.svg#GraublauWeb') format('svg'),
url('GraublauWeb.otf') format('opentype');
}Kodun da eot, otf ve svg kodlarına gerek kalmadı. Kodumuz daha basit bir hal aldı.
@font-face {
font-family: 'BenimYaziTipim';
src: url('font.woff') format('woff'),
url('font.ttf') format('truetype');
}ttf‘in tutunmasının nedeni mobildeki Android tarayıcısı. Zamanla ttf’inde bitip tek başına woff kullanımına ulaşacağız inşallah.
woff’un tarayıcı desteğini hatırlamakta yarar var. Mobildeki android tarayıcılar sorun oluyor :/
Tarayıcı Desteği
 |
 |
 |
|---|---|---|
| 5.0+ | 9+ | 3.6+ |
Mobil Tarayıcılar
 |
 |
|
|---|---|---|
| 4.4+ | 5.1+ | 36+ |