Yazı tipleriyle ilgili en iyi uygulamalar

Web yazı tiplerini Core Web Vitals için optimize edin.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

Bu makalede, yazı tipleri için performansla ilgili en iyi uygulamalar açıklanmaktadır. Web yazı tiplerinin performansı çeşitli şekillerde etkilediği durumlar vardır:

Bu makale üç bölüme ayrılmıştır: yazı tipi yükleme, yazı tipi yayınlama ve yazı tipi oluşturma. Her bölümde, yazı tipi yaşam döngüsünün bu yönünün işleyiş şekli açıklanmakta ve ilgili en iyi uygulamalar paylaşılmaktadır.

Yazı tipi yükleniyor

Yazı tipleri genellikle önemli kaynaklardır, çünkü bunlar olmadan kullanıcı sayfa içeriğini görüntüleyemeyebilir. Dolayısıyla, yazı tipi yüklemeyle ilgili en iyi uygulamalar genellikle yazı tiplerinin mümkün olduğunca erken yüklenmesini sağlamaya odaklanır. Üçüncü taraf sitelerden yüklenen yazı tipleri, bu yazı tipi dosyalarının indirilmesi ayrı bağlantı kurulumları gerektirdiğinden, özellikle dikkatli olunmalıdır.

Sayfanızın yazı tiplerinin zamanında istendiğinden emin değilseniz daha fazla bilgi için Chrome Geliştirici Araçları'ndaki Ağ panelinde bulunan Zamanlama sekmesini kontrol edin.

Geliştirici Araçları'ndaki Zamanlama sekmesinin ekran görüntüsü

@font-face konusunu anlama

Yazı tipi yüklemeyle ilgili en iyi uygulamaları incelemeden önce @font-face'in işleyiş şeklini ve bunun yazı tipi yüklemeyi nasıl etkilediğini anlamanız önemlidir.

@font-face beyanı, herhangi bir web yazı tipiyle çalışmanın önemli bir parçasıdır. En azından yazı tipine atıfta bulunmak için kullanılacak adı ve ilgili yazı tipi dosyasının konumunu belirtir.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

@font-face bildirimiyle karşılaşıldığında yazı tipinin istenmesi gibi yaygın bir yanlış kanı söz konusudur. Bu doğru değildir. @font-face bildirimi tek başına yazı tipi indirme işlemini tetiklemez. Bunun yerine, yalnızca sayfada kullanılan stil tarafından referans verilen bir yazı tipi indirilir. Örneğin:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

Diğer bir deyişle, yukarıdaki örnekte Open Sans yalnızca sayfanın bir <h1> öğesi içermesi halinde indirilir.

Dolayısıyla, yazı tipi optimizasyonu üzerinde düşünürken, stil sayfalarına yazı tipi dosyalarının kendileri kadar dikkat edilmesi gerekir. Stil sayfalarının içeriğini veya yayınlanmasını değiştirmek, yazı tiplerinin ne zaman geleceği üzerinde önemli bir etkiye sahip olabilir. Benzer şekilde, kullanılmayan CSS'yi kaldırmak ve stil sayfalarını bölmek, sayfa tarafından yüklenen yazı tipi sayısını azaltabilir.

Satır içi yazı tipi bildirimleri

Çoğu site, yazı tipi bildirimlerini ve diğer kritik stilleri dış bir stil sayfasına eklemek yerine ana dokümanın <head> bölümüne satır içi olarak eklemekten büyük yarar sağlar. Bu, tarayıcının, harici stil sayfasının indirilmesini beklemesine gerek olmadığı için yazı tipi bildirimlerini daha erken keşfetmesine olanak tanır.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

Kritik CSS'leri satır içine almak, tüm sitelerin başaramayacağı daha gelişmiş bir teknik olabilir. Performansın avantajları açıktır ancak zorunlu olarak CSS'nin (ideal olarak yalnızca kritik CSS'nin) doğru şekilde satır içine alınmasını ve tüm ek CSS'lerin oluşturmayı engellemeyecek şekilde yayınlanmasını sağlamak için ek işlemler ve derleme araçları gerektirir.

Önemli üçüncü taraf kaynaklara önceden bağlanın

Siteniz üçüncü taraf sitesinden yazı tipleri yüklüyorsa üçüncü taraf kaynakla erken bağlantı kurmak için preconnect kaynak ipucunu kullanmanız önemle tavsiye edilir. Kaynak ipuçları, dokümanın <head> bölümüne yerleştirilmelidir. Aşağıdaki kaynak ipucu, yazı tipi stil sayfasını yüklemek için bir bağlantı oluşturur.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

Yazı tipi dosyasını indirmek için kullanılan bağlantıyı önceden bağlamak için crossorigin özelliğini kullanan ayrı bir preconnect kaynak ipucu ekleyin. Stil sayfalarından farklı olarak, yazı tipi dosyaları bir CORS bağlantısı üzerinden gönderilmelidir.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

preconnect kaynak ipucunu kullanırken, bir yazı tipi sağlayıcının farklı kaynaklardan stil sayfaları ve yazı tipleri sunabileceğini unutmayın. Örneğin, Google Fonts için preconnect kaynak ipucu bu şekilde kullanılır.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

Yazı tiplerini yüklemek için preload kullanırken dikkatli olun

preload, yazı tiplerini sayfa yükleme işleminin başlarında keşfedilebilir hale getirmede son derece etkili olsa da bu durum, tarayıcı kaynaklarını diğer kaynakların yüklenmesinden alıkoymak zorunda kalır.

Yazı tipi bildirimlerini satır içine almak ve stil sayfalarını ayarlamak daha etkili bir yaklaşım olabilir. Bu düzenlemeler, yalnızca geçici bir çözüm sağlamaktan ziyade geç keşfedilen yazı tiplerinin kök nedenini gidermeye daha yakındır.

Ayrıca, tarayıcının yerleşik içerik pazarlık stratejilerinden bazılarını atladığı için preload, yazı tipi yükleme stratejisi olarak da dikkatli bir şekilde kullanılmalıdır. Örneğin, preload, unicode-range bildirimleri yok sayar ve dikkatli bir şekilde kullanılırsa yalnızca tek bir yazı tipi biçimini yüklemek için kullanılmalıdır.

Bununla birlikte, harici stil sayfalarını kullanırken tarayıcı, yazı tipinin gerekli olup olmadığını çok daha ileri bir zamana kadar keşfedemeyecek olduğundan, en önemli yazı tiplerini önceden yüklemek çok etkili olabilir.

Yazı tipi teslimi

Yazı tipinin daha hızlı gönderilmesi, metinlerin daha hızlı oluşturulmasını sağlar. Ayrıca, bir yazı tipi yeterince erken yayınlanırsa bu, yazı tipi değişiminden kaynaklanan düzen kaymalarını ortadan kaldırmaya yardımcı olabilir.

Kendi bünyesinde barındırılan yazı tiplerini kullanma

Kağıt üzerinde, kendi bünyesinde barındırılan bir yazı tipinin kullanılması, üçüncü taraf bağlantı kurulumunu ortadan kaldırdığı için daha iyi performans sağlar. Ancak, uygulamada, bu iki seçenek arasındaki performans farkları daha net değildir: Örneğin, Web Almanağı üçüncü taraf yazı tiplerini kullanan sitelerin, birinci taraf yazı tiplerini kullanan yazı tiplerine göre daha hızlı bir oluşturma gerçekleştirdiğini tespit etmiştir.

Kendi bünyesinde barındırılan yazı tiplerini kullanmayı düşünüyorsanız sitenizin İçerik Yayınlama Ağı (CDN) ve HTTP/2 kullandığını doğrulayın. Bu teknolojiler olmadan, kendi bünyesinde barındırılan yazı tiplerinin daha iyi performans sunma olasılığı çok daha düşüktür. Daha fazla bilgi için İçerik Yayınlama Ağları bölümüne bakın.

Kendi bünyesinde barındırılan bir yazı tipi kullanıyorsanız yazı tipi alt ayarı ve WOFF2 sıkıştırması gibi, üçüncü taraf yazı tipi sağlayıcılarının genellikle otomatik olarak sağladığı bazı yazı tipi dosyası optimizasyonlarını da uygulamanız önerilir. Bu optimizasyonları uygulamak için gereken çaba biraz sitenizin desteklediği dillere bağlıdır. Özellikle, CJK dilleri için yazı tiplerini optimize etmenin özellikle zor olabileceğini unutmayın.

WOFF2'yi kullan

Modern yazı tipi yazı tipleri arasında WOFF2 en yeni yazı tipidir, en geniş tarayıcı desteğine sahiptir ve en iyi sıkıştırmayı sunar. Brotli'yi kullandığından WOFF2, WOFF'a göre% 30 daha iyi sıkıştırarak, indirme işleminin daha az olmasını ve dolayısıyla daha hızlı bir performansın ortaya çıkmasını sağlar.

Tarayıcı desteği de hesaba katıldığında uzmanlar artık yalnızca WOFF2 kullanılmasını öneriyor:

Aslında, bunun aynı zamanda sadece WOFF2'yi kullanın ve geri kalan her şeyi bir kenara koymanın da zamanı olduğunu düşünüyoruz.
.
. Bu yöntem, CSS'nizi ve iş akışınızı büyük ölçüde basitleştirir, ayrıca yanlışlıkla iki kez veya yanlış yazılan yazı tipi indirmelerini önler. WOFF2 artık her yerde desteklenmektedir. Dolayısıyla, gerçekten eski tarayıcıları desteklemeniz gerekmiyorsa WOFF2 kullanmanız yeterlidir. Bunu yapamıyorsanız, eski tarayıcılara hiçbir web yazı tipi sunmamayı düşünebilirsiniz. Güçlü bir yedek stratejiniz varsa bu durum sorun yaratmaz. Eski tarayıcıları kullanan kişiler yalnızca yedek yazı tiplerinizi görür.

Bram Stein, 2022 Web Almanağı'ndan

Alt küme yazı tipleri

Yazı tipi dosyaları genellikle destekledikleri tüm çeşitli karakterler için çok sayıda glif içerir. Ancak, sayfanızdaki tüm karakterlere ihtiyacınız olmayabilir ve yazı tiplerini alt ayarlayarak yazı tipi dosyalarının boyutunu küçültebilirsiniz.

@font-face bildirimindeki unicode-range açıklayıcısı, bir yazı tipinin hangi karakterler için kullanılabileceğini tarayıcıya bildirir.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

Sayfa, unicode aralığıyla eşleşen bir veya daha fazla karakter içeriyorsa bir yazı tipi dosyası indirilir. unicode-range, sayfa içeriği tarafından kullanılan dile bağlı olarak farklı yazı tipi dosyaları sunmak için yaygın olarak kullanılır.

unicode-range genellikle alt ayarlama tekniğiyle birlikte kullanılır. Bir alt yazı tipi, orijinal yazı tipi dosyasında yer alan gliflerin daha küçük bir kısmını içerir. Örneğin, bir site, tüm karakterleri tüm kullanıcılara sunmak yerine, Latin ve Kiril karakterleri için ayrı alt küme yazı tipleri oluşturabilir. Yazı tipi başına glif sayısı büyük ölçüde farklılık gösterir: Latince yazı tipleri genellikle yazı tipi başına 100 ila 1000 glif boyutundadır. CJK yazı tipleri 10.000'den fazla karakter içerebilir. Kullanılmayan karakterleri kaldırmak, yazı tipinin dosya boyutunu önemli ölçüde azaltabilir.

Bazı yazı tipi sağlayıcıları, yazı tipi dosyalarının farklı sürümlerini otomatik olarak farklı alt kümelerle sağlayabilir. Örneğin, Google Fonts bunu varsayılan olarak yapar:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Kendi bünyesinde barındırmaya geçiş yaparken bu, kolayca gözden kaçabilecek ve yerel olarak daha büyük yazı tipi dosyalarına yol açabilecek bir optimizasyondur.

Yazı tipi sağlayıcınız buna izin veriyorsa bir API aracılığıyla (Google Fonts bunu bir text parametresi sağlayarak destekler) veya yazı tipi dosyalarını manuel olarak düzenleyip ardından kendi kendine barındırarak yazı tiplerini manuel olarak alt kümelere de ekleyebilirsiniz. Yazı tipi alt kümesi oluşturmaya yönelik araçlar arasında alt yazı tipi ve glifanger bulunur. Ancak, alt ayarlamaya izin vermek ve kendi kendine barındırmak için kullandığınız yazı tiplerinin lisansını kontrol edin.

Daha az web yazı tipi kullanın

En hızlı şekilde yayınlanan yazı tipi, daha önce talep edilmeyen bir yazı tipidir. Sistem yazı tipleri ve değişken yazı tipleri, sitenizde kullanılan web yazı tiplerinin sayısını potansiyel olarak azaltmanın iki yoludur.

Sistem yazı tipi, bir kullanıcı cihazının kullanıcı arayüzü tarafından kullanılan varsayılan yazı tipidir. Sistem yazı tipleri genellikle işletim sistemine ve sürüme göre değişir. Yazı tipi zaten yüklü olduğundan, yazı tipinin indirilmesine gerek yoktur. Sistem yazı tipleri özellikle gövde metninde iyi performans gösterebilir.

CSS'nizde sistem yazı tipini kullanmak için system-ui öğesini yazı tipi ailesi olarak listeleyin:

font-family: system-ui

Değişken yazı tiplerinin arkasındaki fikir, tek bir değişken yazı tipinin birden çok yazı tipi dosyasının yerine kullanılmasıdır. Değişken yazı tipleri, bir "varsayılan" tanımlayarak çalışır yazı tipi stilini değiştirmek ve yazı tipini değiştirmek için "eksen" sağlamak. Örneğin, önceden açık, normal, kalın ve ekstra kalın yazı tipi için ayrı yazı tipleri gerektiren yazı tiplerinde Weight eksenli değişken yazı tipi kullanılabilir.

Değişken yazı tiplerine geçiş herkesin yararına olmayacaktır. Değişken yazı tipleri birçok stil içerir. Bu nedenle, genellikle yalnızca tek bir stil içeren ve değişken olmayan yazı tiplerine göre daha büyük dosya boyutlarına sahiptir. Değişken yazı tipleri kullanılarak en çok gelişmeyi yaşayacak siteler, çeşitli yazı tipi stilleri ve ağırlıkları kullanan (ve bunları kullanması gereken) sitelerdir.

Yazı tipi oluşturma

Tarayıcı, henüz yüklenmemiş bir web yazı tipiyle karşılaştığında bir ikilemle karşı karşıya kalır: Web yazı tipine ulaşana kadar metin oluşturmayı beklemeli mi? Yoksa web yazı tipi gelene kadar metni yedek bir yazı tipinde oluşturmalı mı?

Farklı tarayıcılar bu senaryoyu farklı şekilde ele alır. Varsayılan olarak, ilişkili web yazı tipi yüklenmediyse Chromium tabanlı ve Firefox tarayıcılar metin oluşturmayı 3 saniyeye kadar engeller; Safari, metnin oluşturulmasını süresiz olarak engeller.

Bu davranış, font-display özelliği kullanılarak yapılandırılabilir. Bu seçimin önemli etkileri olabilir: font-display; LCP, FCP ve düzen kararlılığını etkileme potansiyeline sahiptir.

Uygun bir font-display stratejisi seçin

font-display, ilişkili web yazı tipi yüklenmediğinde metin oluşturmaya nasıl devam etmesi gerektiğini tarayıcıya bildirir. Her yazı tipi karakteri için tanımlanır.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

font-display için beş olası değer vardır:

Değer Engelleme süresi Değişim dönemi
Otomatik Tarayıcıya göre değişir Tarayıcıya göre değişir
Engelle 2-3 saniye Sonsuz
Değiştir 0 ms. Sonsuz
Yedek 100 ms 3 saniye
İsteğe bağlı 100 ms Yok
  • Engelleme süresi: Engelleme süresi, tarayıcı bir web yazı tipi istediğinde başlar. Engelleme süresi boyunca, web yazı tipi kullanılamazsa yazı tipi görünmez bir yedek yazı tipinde oluşturulur. Böylece, metin kullanıcı tarafından görülemez. Yazı tipi, engelleme süresinin sonunda kullanılamazsa yedek yazı tipinde oluşturulur.
  • Değişim süresi: Değişim süresi, engelleme döneminden sonra gelir. Web yazı tipi, değiştirme süresi içinde kullanılabilir hale gelirse "değiştirilir" inç

font-display stratejileri, performans ile estetik arasındaki dengeyle ilgili farklı bakış açılarını yansıtır. Dolayısıyla bu yaklaşım bireysel tercihlere, web yazı tipinin sayfa ve marka açısından ne kadar önemli olduğuna ve geç teslim edilen bir yazı tipinin değiştirilirken ne kadar rahatsız edici olabileceğine bağlı olduğu için önerilen bir yaklaşım sunmak zordur.

Çoğu site için en uygun üç strateji şunlardır:

  • Performans en yüksek önceliğe sahipse: font-display: optional kullanın. En "iyi performans gösteren" budur Yaklaşım: Metin oluşturma işlemi 100 ms'den uzun sürmez ve yazı tipi değiştirmeyle ilgili düzen kaymaları olmayacağı garanti edilir. Bununla birlikte, olumsuz bir durum, geç teslim edilmesi durumunda web yazı tipinin kullanılmamasıdır.

  • Metni hızlıca görüntülemek en önemli öncelik olmasına rağmen web yazı tipinin kullanıldığından emin olmak istiyorsanız: font-display: swap kullanın. Ancak yazı tipini, düzen kaymasına neden olmayacak kadar erken teslim ettiğinizden emin olun. Bu seçeneğin dezavantajı, yazı tipi geç geldiğindeki rahatsız edici kaymadır.

  • Metnin bir web yazı tipinde görüntülenmesini sağlamak birinci önceliktir: font-display: block kullanın ancak yazı tipini, metindeki gecikmeyi en aza indirecek kadar erken teslim ettiğinizden emin olun. Bunun olumsuz tarafı, ilk metnin görüntülenmesinin gecikmesidir. Bu hataya rağmen, metin aslında görünmez çizildiğinden ve bu nedenle alanı ayırmak için yedek yazı tipi alanının kullanılmasından dolayı bir düzen kaymasına neden olabileceğini unutmayın. Web yazı tipi yüklendiğinde farklılık alanı ve dolayısıyla da kayma gerekebilir. Yine de metnin kendisi değişmeyeceğinden bu, font-display: swap ürününe göre daha az rahatsız edici bir kayma olabilir.

ziyaret edin.

Şu iki yaklaşımın birleştirilebileceğini de unutmayın: Örneğin, marka bilinci oluşturma ve görsel olarak ayırt edici diğer sayfa öğeleri için font-display: swap kullanın; gövde metninde kullanılan yazı tipleri için font-display: optional kullanın.

Yedek yazı tipiniz ile web yazı tipiniz arasındaki geçişi azaltın

CLS etkisini azaltmak için yeni size-adjust özelliklerini kullanabilirsiniz. Daha fazla bilgi için CSS size-adjust ile ilgili makaleyi inceleyin. Bu, araç setimize çok yeni bir ekleme olduğundan daha gelişmiş ve şu anda biraz manuel bir yaklaşımdır. Ancak, üzerinde denemeler yapabileceğiniz ve gelecekte araç iyileştirmelerinin yapılıp yapılamayacağını düşünmeye devam edeceğiz.

Sonuç

Web yazı tipleri hâlâ bir performans sorunu olmaya devam ediyor, ancak bu sorunu mümkün olduğunca azaltmak için bunları optimize etmemize olanak tanıyan seçenekler gittikçe artıyor.