CSS @font-face

@font-face, tarayıcıya bir font dosyasının nerede bulunacağını ve nasıl adlandırılacağını söyleyen CSS at-kuralıdır. İlk olarak 1997'de IE 4'te desteklendi; ancak WOFF'un ortaya çıkması ve diğer tarayıcıların bu kuralı tutarlı biçimde uygulamasıyla birlikte 2010 civarında tüm tarayıcılarda pratik hale geldi.

İkon fontları için @font-face, font dosyalarınız ile ikonları görüntüleyen CSS sınıfları arasındaki yapıştırıcıdır. Bu kural olmadan tarayıcının font-family: 'MyIcons''ın sunucunuzdan belirli bir dosya yüklemesi gerektiğini bilmesinin yolu yoktur.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

font-family tanımlayıcısı fonta daha sonra başvuracağınız bir ad verir. src tanımlayıcısı tarayıcıya dosyayı nereden indireceğini ve hangi formatta olduğunu söyler. font-weight ve font-style tanımlayıcıları tarayıcının kalın veya italik varyantlar sentezlememesini sağlar. font-display ise font yüklenirken ne olacağını kontrol eder.

Her URL'nin ardından gelen format() ipucu, tarayıcıya dosyanın hangi formatta olduğunu söyler; böylece önce indirmeden desteklemediği formatları atlayabilir. Yıllar içinde tarayıcı desteği geliştikçe önerilen format seti önemli ölçüde daraldı.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

%97+ tarayıcı kapsamıyla, yalnızca WOFF2 modern projelerin büyük çoğunluğu için yeterlidir. Bu en basit ve en performanslı yaklaşımdır.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

Yedek olarak WOFF eklemek, WOFF2'yi desteklemeyen IE 11'i kapsar. Modern tarayıcılar WOFF2 dosyasını alır; IE 11 WOFF'a geçer.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

Tam "kurşun geçirmez" yığın IE 6-8 için EOT'u, modern tarayıcılar için WOFF2'yi, IE 9-11 için WOFF'u ve son yedek olarak TTF'yi içerir. Tarayıcı her src girişini sırayla dener ve anladığı ilk formatı kullanır. Bu yaklaşım yalnızca aşırı eski sürüm gereksinimi olan projeler için gereklidir.

İkon fontları için standart desen, font-family'yi ve paylaşılan oluşturma stillerini ayarlayan bir temel sınıf, ardından ::before sözde öğelerini her ikonun Unicode kod noktasına ayarlayan content ile bireysel ikon sınıfları kullanır.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

Temel sınıf, tarayıcının ikonları bozacak kalın, italik veya diğer dönüşümleri uygulamamasını sağlamak için font stilini sıfırlar. -webkit-font-smoothing ve -moz-osx-font-smoothing özellikleri macOS ve iOS'ta daha keskin oluşturma için antialiasing'i etkinleştirir.

Her ikon sınıfı, o gliph'e atanan Unicode kod noktasıyla bir ::before sözde öğesi ayarlar. Ters eğik çizgi gösterimi (\E001), CSS'in bir Unicode karakterini onaltılık kod noktasıyla başvurma yoludur.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

Hem <i> hem de <span> eşit derecede iyi çalışır. Öğenin kendisi boştur — ikon tamamen ::before sözde öğesi tarafından oluşturulur.

font-display tanımlayıcısı, font dosyası hâlâ indirilirken tarayıcının ne göstereceğini kontrol eder. Bu, ikon fontları için kritiktir; çünkü yanlış ayar sayfa yüklenirken ikonları görünmez kılabilir.

İkon fontları için swap önerilen seçimdir. Kısa bir biçimsiz içerik yanıp sönmesi (ikon kod noktalarının kareler veya boş alanlar olarak görünebileceği yerde), görünmez ikonlardan çok daha iyidir. block ile kullanıcılar yavaş bağlantılarda ikonların olması gereken yerde 3 saniyeye kadar boş alan görebilir — bu da sayfanın bozuk göründüğü anlamına gelir. swap ile ikonlar font yüklenir yüklenmez beliriyor ve geçiş modern bağlantılarda genellikle fark edilmiyor.

Font dosyaları varsayılan olarak oluşturmayı engeller — tarayıcı, dosya indirilene kadar özel bir fontla metin boyamaz. Etkiyi en aza indirme teknikleri:

• Font dosyasını önceden yükleyin — <link rel="preload"> kullanarak, tarayıcı ona başvuran CSS'i parse etmeden önce fontun indirilmesine başlayın.
• Fontları kendiniz barındırın — font dosyalarını HTML'nizle aynı kaynaktan sunmak, ekstra DNS aramalarını ve bağlantı kurulumunu önler ve CORS sorunlarını ortadan kaldırır.
• Fontu alt kümeye alın — dosya boyutunu azaltmak için kullanılmayan ikonları kaldırın. Yalnızca 50 ikon kullandığınız 500 ikonluk bir font, indirmenin %90'ını boşa harcıyor demektir.
• unicode-range kullanın — birden fazla ikon setiniz varsa, bu tanımlayıcı tarayıcıya font dosyasını yalnızca belirtilen aralıktaki karakterler sayfada gerçekten kullanıldığında indirmesini söyler.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

crossorigin niteliği, aynı kaynaklı fontlar için bile gereklidir — bu, font yükleme spesifikasyonunun bir tuhaf özelliğidir. Bu olmadan tarayıcı fontu iki kez indirir: preload ipucundan bir kez (CORS olmadan) ve @font-face kuralından bir kez (CORS ile).

• CORS hataları — farklı bir kaynaktan sunulan font dosyaları (örn. CDN alt alan adı) sunucuda Access-Control-Allow-Origin başlıkları gerektirir. Alternatif olarak <link> etiketinde crossorigin niteliğini kullanın. Uygun CORS yapılandırması olmadan tarayıcı fontu sessizce engeller.
• İkonlar kareler veya dikdörtgenler olarak görünüyor — bu genellikle font dosyası yolunun yanlış olduğu, fontun henüz yüklenmediği veya ikon sınıfındaki font-family adının @font-face bildirimindeki adla eşleşmediği anlamına gelir. Font dosyasının 200 durumuyla yüklendiğini doğrulamak için tarayıcınızın Ağ sekmesini kontrol edin.
• İkonlar yanlış glif'leri gösteriyor — sistem fontlarıyla Unicode kod noktası çakışması. İkon fontu sistem fontlarıyla örtüşen aralıklardaki kod noktalarını kullanıyorsa, tarayıcı ikon yerine bir sistem karakteri oluşturabilir. İkon fontları bunu önlemek için genellikle Özel Kullanım Alanı'nı (U+E000 ile U+F8FF arası) kullanır.