font-display, web geliştiricilerinin web sayfalarında kullandıkları fontların nasıl yüklendiğini kontrol etmelerine olanak tanıyan bir CSS özelliğidir. Bu özellik sayesinde, sayfa yüklendiğinde kullanılan fontların nasıl davranacağını belirleyebilir ve sayfa yüklemesinin hızını artırabilir.
font-display: swap özelliği kullanıldığında, web sayfası yüklendiğinde hemen yedek bir font görüntülenir ve ana font yüklenirken geçici olarak tanımlanan font yerine kullanılır. Böylece, sayfa yüklenme süresi artmamış olup, sayfa daha hızlı bir şekilde açılır.
font-display: block özelliği kullanıldığında, fontlar yüklenene kadar sayfa bekletilir. Bu özellik, yavaş bağlantılarda sayfa yükleme hızını düşürür, fakat fontların tam olarak yüklenip görüntülenmesi garantilenmiş olur.
Font yükleme hızı web performansını etkileyen önemli bir faktördür. Web sayfası yükleme hızı arttıkça kullanıcı deneyimi olumlu etkilenir.
@font-face {
font-family: 'Open Sans';
font-display: swap;
src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
}
body {
font-family: 'Barlow', sans-serif;
}Yukarıdaki kod, web sayfasında kullanılmak üzere Open Sans fontunu tanımlar. font-display özelliği “swap” olarak ayarlanmıştır, yani font yüklenirken sayfa yüklenmeye devam eder ve yedek bir font hızlıca görüntülenir. Daha sonra, body etiketinde Barlow fontu, font-family özelliğiyle tanımlanmıştır.
Eğer yüklenen font hızlıca kullanılamazsa, tarayıcı yedek fonta geçer ve sayfa hızlıca açılır. Ancak, yüklenen font kullanıma hazır hale gelene kadar yedek font kullanılır. Böylece, kullanıcılar sayfayı hızlıca görüntüleyebilir ve font yüklenirken beklemek zorunda kalmazlar.