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.