Kendi kendine barındırılan yazı tipleri
Web uygulamanızda kullanılan yazı tiplerini gruplamak istiyorsanız, Fontsource göz atmak isteyebileceğiniz bir kitaplıktır (bağlantı ayrıca sayfanın sonundaki ekte). Kullanmak istediğiniz yazı tiplerini yüklemenize izin verir, bu da yazı tiplerinizin sizin tarafınızdan barındırıldığı ve yüklenmesi için bir CDN gerektirmediği anlamına gelir.
Her yazı tipini yükleme
Kullanmak istediğiniz yazı tiplerini yüklemek için her bir varyant için yükleme komutunu çalıştırmanız yeterlidir. Aşağıdaki kod parçacıkları, bu PWA için yazı tipinin nasıl yükleneceğini gösterir.
npm install @fontsource/work-sans
Uygulamamın giriş noktasında, kurulu paketi içe aktararak tüketmem gerekiyor. Bu, herhangi bir ek yük eklemeden neye ihtiyacım olduğunu tam olarak tanımlamamı sağlıyor. Yazı tiplerinin boyutu oldukça büyük olabileceğinden, bu Bayt'tan tasarruf etmek için harika bir fırsattır.
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
Son olarak, CSS'imde yazı tipi ailesini ayarlamam gerekiyor. Kullandığınız kitaplığa bağlı olarak (örneğin Tailwind.css), bu kod sizin için biraz farklı görünebilir.
body {
font-family: "Work Sans", sans-serif;
}
Değişken yazı tipleri
Fontsource ayrıca değişken fontları yüklemek için bir seçenek sunar; bu, font yükleme söz konusu olduğunda en son araçlara erişiminiz olduğu anlamına gelir. Lütfen tüm yazı tiplerinin değişken varyantlar olarak mevcut olmadığını unutmayın.
