Fontik

CSS ile web sitesinde yazı tipi kullanma

Bir yazı tipini kendi sitenizde göstermek için WOFF2 dosyalarını sunucunuza koyun ve CSS’te @font-face ile tanımlayın. Ziyaretçilerin hiçbir şey yüklemesi gerekmez.

Son güncelleme:

Adımlar

  1. WOFF2 dosyalarını kullanın: küçüktürler ve tüm güncel tarayıcılar tarafından desteklenirler. Yazı tipi sayfasından indirebileceğiniz web paketi WOFF2 dosyalarını ve hazır CSS’i içerir.
  2. Yazı tipi dosyalarını kendi sunucunuza, örneğin /fonts/ klasörüne koyun.
  3. Yazı tipini CSS’te @font-face ile tanımlayın: @font-face { font-family: "My Font"; src: url("/fonts/my-font.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  4. Stillerinizde kullanın ve her zaman yedek yazı tiplerini de yazın: body { font-family: "My Font", system-ui, sans-serif; }
  5. font-display: swap metni hemen yedek bir yazı tipiyle gösterir ve sizin yazı tipiniz yüklenince onunla değiştirir.
  6. Değişken bir yazı tipi için tek dosya kullanın ve @font-face içinde kalınlık aralığını belirtin, örneğin font-weight: 100 900.

İpuçları

  • Ana dosyayı sayfanın head bölümüne eklediğiniz şu etiketle önceden yükleyin: <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/my-font.woff2">
  • Yalnızca gerçekten kullandığınız kalınlıkları tutun.
  • Dosyaları sayfayla aynı kaynaktan sunun; başka bir alan adından geliyorlarsa CORS başlıkları gönderin.
  • Lisansın web’de kullanıma izin verdiğini kontrol edin; açık lisanslı ücretsiz yazı tipleri genellikle izin verir.

Sorular

Web sitesi için hangi dosyalara ihtiyacım var?

WOFF2 dosyalarına. Küçüktürler ve tüm güncel tarayıcılarda çalışırlar; yazı tipi sayfasındaki web paketi bunları hazır CSS ile birlikte içerir.

Ziyaretçilerin yazı tipini yüklemesi gerekir mi?

Hayır: sayfa yazı tipini istediği anda tarayıcı onu sunucunuzdan indirir.

Yazı tipini ticari bir projede kullanabilir miyim?

Bu, yazı tipinin lisansına bağlıdır. Lisansı katalogdaki yazı tipi sayfasından okuyun.

Diğer rehberler