Yerel olarak barındırılan yazı tipleri, üçüncü taraf yazı tipi sağlayıcısının (örneğin, Google Fonts) kullandığı yazı tipi yerine kendi sunucularınızdan sunulan yazı tipi dosyalarıdır.
Yazı tiplerini hızlı bir şekilde teslim etmek son derece önemlidir: Daha hızlı yazı tipi teslimi, yalnızca metnin kullanıcıya daha erken gösterilmesi anlamına gelmez, aynı zamanda bir yazı tipinin düzen kaymasına neden olup olmaması üzerinde de büyük bir etkiye sahiptir. Bir yazı tipi ihtiyaç duyulmadan yayınlanamazsa genellikle yazı tipi değiştirildiğinde bir düzen kayması olur. Bu düzen kaymasının boyutu, yedek yazı tipinin web yazı tipiyle ne kadar yakından eşleştiğine bağlı olarak değişebilir. Bu olguyu çalışırken görmek için demoyu izleyin ve hızlı bağlantı ile yavaş bağlantıda gerçekleşen düzen kaymalarını karşılaştırın.
Aşağıdaki örnekte, kendi bünyesinde barındırılan bir yazı tipini mümkün olduğunca hızlı bir şekilde sunmak için iki performans tekniği birleştirilmektedir: satır içi yazı tipi bildirimlerinin kullanımı ve WOFF2 yazı tipi biçiminin kullanımı.
Satır içi yazı tipi bildirimleri:
@font-face
vefont-family
bildirimlerini ana dokümanda satır içine almak, bu bilgileri harici bir stil sayfasına eklemek yerine, ayrı bir stil sayfası dosyasının indirilmesini beklemek zorunda kalmadan tarayıcının sayfada hangi yazı tipi dosyalarının kullanılacağını belirlemesine olanak tanır. Genellikle tarayıcılar yazı tipi dosyalarını sayfada kullanıldıklarını anlamadıkları sürece indirmeyeceğinden bu önemlidir. Çoğu durumda, satır içi yazı tipi bildirimleri yazı tipini yüklemek içinpreload
kullanmak yerine tercih edilir.WOFF2: Modern yazı tipleri arasında en yeni olan WOFF2, en geniş tarayıcı desteğine sahiptir ve en iyi sıkıştırmayı sunar. Brotli'yi kullandığı için WOFF2, WOFF'dan% 30 daha iyi sıkıştırır.
Performansı daha da artırmak için yazı tipi alt ayarı kullanabilirsiniz. Yazı tipi alt ayarı, genellikle kullanılmayan glifleri kaldırmak amacıyla yazı tipi dosyasını daha küçük alt kümelere ayırma uygulamasıdır. Bu, bir yazı tipinin dosya boyutunu önemli ölçüde küçültebilir. Yazı tipi alt kümeleri oluşturma araçları arasında fontkit, subfont ve glifhanger yer alır.
Kendi kendine barındırılan yazı tiplerine ilişkin en iyi uygulamalar hakkında daha fazla bilgi için Kendi kendine barındırılan yazı tiplerini kullanma bölümüne bakın.
Örnek:
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("Google Sans.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>