Bu konu neden önemli?
Yazı tipleri genellikle yüklenmesi zaman alan büyük dosyalardır. Bu sorunu çözmek için, bazı tarayıcılar yazı tipi yüklenene kadar metni gizler ("görünmez metin flash'ı").
Largest Contentful Paint (LCP), metnin oluşturulması beklenirken gecikebilir. Performansı artırmak için optimizasyon yapıyorsanız, "görünmez metin aniden hatadan" (FOIT) kaçınmalı ve "stilsiz metin flash" (FOUT) oluşturan bir sistem yazı tipi kullanarak içeriği kullanıcılara hemen göstermeniz gerekir.
Yazı tiplerini görüntülemek için kullanılan 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ılır ve ardından yazı tipi değiştirilir. |
| Firefox | Metin 3 saniyeye kadar gizlenir. Metin hâlâ hazır değilse yazı tipi hazır olana kadar bir sistem yazı tipi kullanılır ve ardından yazı tipi değiştirilir. |
| Safari | Yazı tipi hazır olana kadar metni gizler. |
Metni hemen göster
Bu kılavuzda, metinleri mümkün olan en kısa sürede görüntülemenin iki yolu ana hatlarıyla açıklanmaktadır: ilk yaklaşım basittir ve iyi bir tarayıcı desteğine sahiptir. İkinci yaklaşım çok ayrıntılı olsa da size daha fazla seçenek sunabilir. Web siteniz için en iyi seçenek, koşullarınıza bağlıdır.
1. seçenek: font-display'i kullanma
font-display, yazı tipi görüntüleme stratejisini belirtmek için kullanılan bir API'dir. swap, tarayıcıya bu yazı tipini kullanan metnin bir sistem yazı tipi kullanılarak 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;
}
Tüm modern tarayıcılar tarafından desteklenen bir tarayıcı font-display'i desteklemiyorsa tarayıcı, yazı tiplerini yüklerken varsayılan davranışını izlemeye devam eder.
2. seçenek: Özel yazı tiplerini, yüklenene kadar kullanmak için bekleyin
Biraz daha fazla çalışmayla, daha özel bir yaklaşım düşünülebilir.
Bu yaklaşım üç bölümden oluşur:
- İlk sayfa yüklemesinde, başlangıçta özel yazı tipleri kullanmayacak şekilde CSS'nizi yeniden düzenleyerek özel bir yazı tipi kullanmayın. Bu, tarayıcının bir sistem yazı tipini kullanarak metni hemen görüntülemesini sağlar.
- CSS Font Upload API'yi kullanarak özel yazı tipinizin ne zaman yüklendiğini tespit edin
- Ö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 işlem, bazılarının kullanımı daha kolay bir API bulduğu FontFaceObserver kitaplığıyla da gerçekleştirilebilir.
Bu durum, yazı tiplerini yüklerken dikkat edilmesi gereken birkaç ek noktayı dikkate alır. Örneğin, tüm yazı tipleri aynı anda yüklenebilir. Her yazı tipi yüklenirken birden fazla düzen olmaması gerekir. Siteler, daha yavaş bağlantılardaki kullanıcılar veya Verileri Kaydet seçeneğini kullananlar için yazı tiplerini yüklememeyi de tercih edebilir.
Doğrula
Sitenin metni göstermek için font-display: swap kullandığını doğrulamak üzere Lighthouse'u çalıştırın:
- Geliştirici Araçları'nı açmak için Control+Üst Karakter+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 olduğundan emin olun denetiminin başarılı olduğunu onaylayın.