“Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlamak” ifadesi, genellikle web sayfalarında kullanılan yazı tiplerinin yüklenmesi sırasında karşılaşılan bir sorunu tanımlar. Bu sorun, sayfa ilk yüklendiğinde, yazı tiplerinin tam olarak yüklenmeden önce metnin “standart” veya “yazı tipi olmayan” bir şekilde görünmesiyle ilgilidir.
Sorunun Sebebi:
Web sayfası yüklendiğinde, özellikle özel yazı tipleri (custom fonts) kullanılıyorsa, bu yazı tipleri yüklenene kadar metin genellikle tarayıcının varsayılan yazı tipiyle gösterilir. Eğer yazı tipi hızlı bir şekilde yüklenmezse, kullanıcılar metni farklı bir yazı tipiyle görüp, yazı tipi yüklendikten sonra metnin ani bir şekilde değiştiğini fark edebilirler. Bu da bir “flash of unstyled text” (FOUT) veya “flash of invisible text” (FOIT) adı verilen bir soruna yol açabilir.
Sorunun Çözümü:
Bu tür sorunları çözmek için birkaç yöntem bulunmaktadır:
- Font-Display Özelliği Kullanma: CSS ile, yazı tipi yüklenirken metnin nasıl görüneceğini kontrol edebilirsiniz.
font-displayözelliği, yazı tipi yüklenene kadar sayfanın nasıl davranacağını belirler. Bu özelliği kullanarak, metnin “görünür” halde kalmasını sağlayabilirsiniz.
Örnek:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-display: swap;
}
font-display: swap; değeri, yazı tipi yüklenene kadar metni varsayılan yazı tipiyle gösterir ve yazı tipi yüklendikten sonra metnin bu yazı tipiyle değişmesini sağlar. Bu, metnin görünür kalmasını sağlar.
- Yazı Tiplerini Asenkron Yüklemek: Yazı tiplerini sayfanın geri kalan içeriğinden bağımsız olarak yüklemek, yazı tipi yüklenene kadar metnin kaybolmasını veya yanlış görünmesini engelleyebilir. Bunu yapmak için JavaScript veya CSS yükleme stratejileri kullanabilirsiniz. Örneğin, yazı tipi dosyasını
<link>etiketi ile asenkron yükleyebilirsiniz. - Yazı Tipi Yedekleme (Fallback) Kullanma: Yazı tipi yüklenemezse veya geç yüklenirse, metnin düzgün bir şekilde görüntülenmesi için yedek yazı tipi kullanmak önemlidir. Bu,
font-familyözelliğinde belirtilerek yapılabilir.
Örnek:
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
- Web Font Yükleme API’leri Kullanma: Google Fonts gibi servisler, yazı tiplerinin düzgün yüklenmesi için çeşitli optimizasyonlar sağlar. Bu servislerin sunduğu yazı tipi yükleme stratejilerini kullanarak FOUT ve FOIT sorunlarını minimize edebilirsiniz.
- CSS Font Face Observer Kütüphanesi Kullanma: Eğer yazı tipi yükleme konusunda daha ileri seviye kontroller yapmak istiyorsanız, Font Face Observer gibi JavaScript kütüphanelerini kullanabilirsiniz. Bu kütüphane, yazı tiplerinin yüklenip yüklenmediğini izler ve yükleme tamamlandığında yazı tiplerini düzgün bir şekilde uygular.
Web yazı tiplerinin düzgün bir şekilde yüklenmesi için en yaygın çözüm font-display: swap; kullanmaktır. Bu, metnin görünür halde kalmasını sağlar ve yazı tipi yüklendikten sonra estetik olarak daha düzgün bir geçiş yapılmasına olanak tanır.