Bu konu neden önemli?
Yazı tipleri genellikle yüklenmesi uzun süren büyük dosyalardır. Bununla başa çıkmak için bazı tarayıcılar, yazı tipi yükleninceye ("görünmez metin yanıp sönme") metni gizler.
Largest Contentful Paint (LCP), metnin oluşturulması beklenirken gecikebilir. Performans için optimizasyon yapıyorsanız "görünmez metnin yanıp sönmesini" (FOIT) önlemek ve "biçimlendirilmemiş metnin yanıp sönmesine" (FOUT) yol açan bir sistem yazı tipi kullanarak içeriği kullanıcılara hemen göstermek istersiniz.
Yazı tiplerini görüntülemek için tarayıcı varsayılanları
Yaygın olarak kullanılan tarayıcılar için varsayılan yazı tipi yükleme davranışları şunlardır:
| Tarayıcı | Yazı tipi hazır olmadığında varsayılan davranış... |
|---|---|
| Chrome ve Edge | Metin 3 saniyeye kadar gizlenir. Metin hâlâ hazır değilse yazı tipi hazır olana kadar bir sistem yazı tipi kullanır ve ardından yazı tipini değiştirir. |
| Firefox | Metin 3 saniyeye kadar gizlenir. Metin hâlâ hazır değilse yazı tipi hazır olana kadar bir sistem yazı tipi kullanır ve ardından yazı tipini değiştirir. |
| Safari | Yazı tipi hazır olana kadar metni gizler. |
Metni hemen görüntüle
Bu kılavuzda, metni mümkün olan en kısa sürede görüntülemenin iki yolu açıklanmaktadır: İlk yaklaşım basittir ve iyi tarayıcı desteğine sahiptir. İkinci yöntem ayrıntılı olsa da size daha fazla seçenek sunabilir. Web siteniz için en iyi seçim, ihtiyaçlarınıza bağlıdır.
1. Seçenek: font-display kullanın
font-display, yazı tipi görüntüleme stratejisini belirtmeye yönelik bir API'dir. swap, tarayıcıya bu yazı tipinin kullanıldığı metnin bir sistem yazı tipiyle hemen görüntülenmesi gerektiğini bildirir. Özel yazı tipi hazır olduğunda sistem yazı tipi değiştirilir.
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
Bir tarayıcı font-display'i desteklemiyorsa (tüm modern tarayıcılar desteklerse) yazı tiplerini yüklemek için varsayılan davranışını izlemeye devam eder.
2. Seçenek: Özel yazı tiplerinin yüklenmesini bekleyin
Biraz daha fazla çalışmayla daha özel bir yaklaşım düşünülebilir.
Bu yaklaşım üç bölümden oluşur:
- CSS'nizi başlangıçta özel yazı tipleri kullanmayacak şekilde yeniden düzenleyerek ilk sayfa yüklemesinde özel bir yazı tipi kullanmayın. Bu, tarayıcının bir sistem yazı tipi kullanarak metni hemen görüntülemesini sağlar.
- Özel yazı tipinizin yüklendiğini CSS Font Upload API ile algılayın
- Özel yazı tipini kullanmak için sayfa stilini güncelleyin.
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
Bu, bazılarının kullanımı daha kolay bir API olan FontFaceObserver kitaplığıyla da gerçekleştirilebilir.
Bu, yazı tiplerinin yüklenmesi sırasında dikkat edilmesi gereken birtakım ek noktalar sağlar. Örneğin, tüm yazı tipleri aynı anda yüklenebilir. Bu sayede her yazı tipi yüklenirken çeşitli düzenlerden kurtulabilirsiniz. Alternatif olarak, siteler daha yavaş bağlantılara sahip kullanıcılar veya Verileri Kaydet seçeneğini kullananlar için yazı tipi yüklememeyi tercih edebilirdi.
Doğrula
Sitenin metni görüntülemek üzere font-display: swap kullandığını doğrulamak için Lighthouse'u çalıştırın:
- Geliştirici Araçları'nı açmak için Ctrl+ÜstKrktr+J (veya Mac'te Command+Option+J) tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
- Rapor oluştur düğmesini tıklayın.
Web yazı tipi yüklemesi sırasında metnin görünür durumda kalmasını sağla denetiminin başarılı olduğunu onaylayın.