@font-face, yazı tiplerinin internetteki web sayfalarında görüntülenmesini sağlayan bir CSS kuralıdır. Bu kural olmadan önce, web yöneticileri sitelerinde en yaygın olan ve kullanıcıların bilgisayarlarında yüklü olan sınırlı sayıda yazı tipi kullanabiliyordu. Font-face'in ortaya çıkmasıyla, herhangi bir belirli yazı tipi bir web sitesine kolayca eklenebilir.
Fontu sitemizden indirdiyseniz, font arşivinde kopyalanması ve projeye ekli CSS belgesine yerleştirilmesi gereken hazır CSS kodunu bulacaksınız.
Adım adım kurulum
1. İstediğiniz yazı tipini seçin ve "web sitesi için indir" seçeneğine tıklayın.
2. Sitenizin kök dizininde bir fonts klasörü oluşturun ve indirdiğiniz fontları kopyalayın.
CSS belgenizi açın ve arşivdeki metin dosyasının içeriğini içine kopyalayın.
4. Yazı tipi klasörünün yolunun doğru yazıldığından emin olun. Yazı tiplerinin bulunduğu klasörün konumuna bağlı olarak, yol bir veya daha fazla nokta içerebilir.
5. Tamamlandı. Aile adının bulunduğu özelliği kopyalayın ve stillerini yazdığınız seçiciye yapıştırın.
Yazı tipini başka bir yerden zaten indirdiysem ve onu eklemek istersem ne olur?
Bu durumda, internette bir font dönüştürücü bulmanız ve ttf fontunuzu (veya otf) doğru formatlara, yani eot, svg, woff ve woff2'ye dönüştürmeniz gerekir. Bu, yazı tipinin tüm tarayıcılarda ve mobil cihazlarda doğru şekilde görüntülenmesini ve çalışmasını sağlamak içindir.
Daha sonra @font-face kuralını sözdizimine uyarak kendiniz hecelemeniz gerekir.
Font-face için sözdizimi
Kuralın sözdizimi kabaca temel özellikler ve gelişmiş özellikler olarak ikiye ayrılabilir.
Temel:
- font-family - yazı tipinin adını belirtir.
- src - yazı tipinin yolunu gösterir. Bu, web sitenizin sunucusunda bulunan yazı tipinin URL'si, başka birinin sunucusunda bulunan yazı tiplerinin URL'leri (Google Fonts gibi) veya yalnızca kullanıcının bilgisayarında bulunan yazı tipinin adı (Helvetica New Bold, Tahoma, Georgia, vb.) olabilir.
Genişletilmiş:
- font-display - yazı tipinin nasıl görüneceğini, indirilip indirilmediğine ve kullanıma hazır olup olmadığına bağlı olarak belirler.
- font-stretch - metnin genişliğini ayarlamanıza olanak tanır.
- font-style - yazı tipinin düz mü, italik mi yoksa eğimli mi olduğunu belirler (son ikisi aynı değildir).
- font-weight - Yazı tipinin doygunluğunu 100 ila 900 (100-küçük, 900-küçük) ölçeğinde ayarlar.
- font-variant - küçük harflerin nasıl sunulması gerektiğini belirleyin - onları değiştirmeden bırakın veya hepsini küçük (büyük) yapın.
- font-feature-settings - OpenType yazı tiplerinde gelişmiş tipografik özellikleri yönetmenizi sağlar.
- font-variations-settings - dört harfli eksen adları belirterek Open Type ve TrueType yazı tiplerinin varyasyonları üzerinde düşük seviyeli kontrol sağlar.
- unicode-range - yazı tipinde kullanılacak Unicode kodları (glifler) aralığını belirtir.
Google Fonts ile sitenize bir yazı tipi bağlama
Google Fonts'u kullanmak, bir yazı tipini web sitenize bağlamanın en kolay yoludur. Web sitelerine gidin, istediğiniz yazı tipini bulun, yüklemek için doğru yazı tiplerini seçin ve kodu kopyalayın.
Kopyalanan kod, html sayfanızdaki head etiketinin gövdesine yerleştirilmelidir.
Bu yöntemin dezavantajı, sitenin oluşturulması sırasında internetiniz kesilirse, dosyalar yerel bilgisayarda ve Google sunucularında bulunmadığından yazı tipleri görüntülenmeyecek ve standart olanlarla değiştirilecektir. Ayrıca, müşteriye bir düzen sunumu için (veya sadece onay için) geldiğinizde ve Wi-Fi'si olmadığında, sorun tekrar ortaya çıkacaktır.
