Font face kullanımı

04 Aralık 2015 1 dk okuma süresi 43 okunma

Tüm tarayıcıların desteklediği font-face kullanımı aşağıdaki gibidir ve fontunuzun tüm formatlarını eklemeniz gerekir. Ttf vey eot font uzantılarının boyutları diğer font uzantılarına göre daha fazladır. Bu nedenle site açılış hızına olumsuz etki edebilir. Tabi fontları sıkıştırmak buna çare olabilir.

@font-face {
  font-family: 'FontAdi';
  src: url('FontAdi.eot'); /* IE9 uyumluluk modu */
  src: url('FontAdi.eot?#iefix') format('embedded-opentype'), /* IE6, IE7, IE8 */
       url('FontAdi.woff2') format('woff2'), /* Yeni tarayıcılar */
       url('FontAdi.woff') format('woff'), /* Yeni tarayıcılar */
       url('FontAdi.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('FontAdi.svg#svgFontAdi') format('svg'); /* iOS */
}

Eğer tüm tarayıcılar önemli değil sadece yeni ve güncel tarayıcılarda font-face aktif olsun derseniz aşağıdaki kullanıma göz atabilirsiniz.

@font-face {
  font-family: 'FontAdi';
  src:  url('FontAdi.woff2') format('woff2'),
        url('FontAdi.woff') format('woff'); 
}

Woff ve woff2 güncel tarayıcılar için en iyi seçenektir ve font boyutları da oldukça düşüktür. Bu da sitenizin açılış hızını olumlu şekilde etkiler.

Yazılarıma abone olmak ister misiniz?
Spam yapılmaz, sadece bildirim amaçlıdır. İstediğiniz zaman abonelikten çıkabilirsiniz.
İlginizi çekebilecek diğer yazılar.
Websitelerinde sistem varsayılan fontu css ile nasıl baz alınır?

Websitelerinin yavaş olması kullanıcıları kötü yönde etkileyebiliyor. Bu nedenle optimizasyon yapmak çok önemli. Websitenizi nasıl optimize edebileceğinizi bu makaleyi okuyarak öğrenebilir ve kendi sitelerinize uygulayabilirsiniz.