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

Chrome explorer Firefox
5.0+ 9+ 3.6+

Mobil Tarayıcılar

Android Mobil Safari Chrome
4.4+ 5.1+ 36+

Kaynak

Google Chrome Developer Tools ile kullanılmayan CSS kodlarını bulmak

Performans hiç olmadığı kadar önemli bir hale geldi. Google'un arama sonuç sıralamasındaki en büyük etkenlerden birinin site hızı olduğun...… Devamını oku

Web Geliştiriciler İçin Editör Seçimi

13 February 2018 tarihinde yayınlandı.

iOS Simülatör ile Mobil Safari'de Hata Ayıklama

08 February 2018 tarihinde yayınlandı.