Google Fonts web siteleriniz de belgeler ve diğer tasarım projelerinizde kullanabileceğiniz açık yazı topluluğudur. Site dizaynlarınızda Google Font aileleri tekbir code şeklinde yer almaktadır. Yapmanız gereken alttaki kodu kopyala-yapıştır yaparak tagları arasına yapıştırmanız yeterli.
Sayfa Hızı Ve Google Web Fontları
Google fontlar sitenizde iyi görünmesinin yanında, bununla ilgili bir problemi de beraberinde getirmektedir. Bu da sayfa yükleme süresidir. Yazı tipi dosyaları, sitenizde görünebilmesi için ziyaretçilerinizin bilgisayarına indirilmesi gerekmekte. Bu da sayfa hızını düşürmektedir. Yapacağımız kodlama işlemiyle web sayfanızın hızını düşürmeye çalışmak yerine, biz Google Font dosyanızın boyutunu azaltmayı hedefleyeceğiz. Tüm Google Font ailesini kullanmak yerine, metin içinde sınırlı harf ve rakamlardan oluşan bir grup belirleyebilirsiniz. Böylece Google, sadece istenen karakterleri içeren yeni bir dinamik yazı tipi dosyası oluşturur.
Google Yazı Dosyalarının Boyutunu Nasıl Azaltırız?
Bunun için yapmanız gereken tek şey, Google yazı isteği URL’si ve bu URL için gereken bütün harflerin yer aldığı bir metin parametresi eklemek. Örnek vererek açıklamak gerekirse eğer Kabin Sketch font’unda yazı metni olarak “9pars” kelimesini kullanmak istiyorsak, CSS dosyasının şu şekilde tekrar düzenlenmesi gerekmektedir.
Orijinal Google Font dosyası 101 KB civarındayken, bu işlem sayesinde yazı tipi dosyası 7.6 KB ‘a kadar düşürülmüş olur.
Google Fontlar genellikle H1,H2,H3 vb. başlık taglarının metinleri için kullanılırlar. Eğer Google Fontları için bütün harf ve rakamları ya da özel karakterleri kullanmak isterseniz, CSS değişikliği alttaki gibi olmalıdır.
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20 ” rel=”stylesheet” type=”text/css”> Bu durumda yazı dosyası 37 KB boyutunda ve hâlâ orijinal Google Font dosyasından %64 daha düşük. Koda %20 yazan yerini neden eklediğimizi merak ediyorsanız, “%20” klavyedeki “space” tuşunu temsil etmektedir. Eğer %27 yazarsanız “tek tırnak”,%22 yazarsanız “ çift tırnak” işaretini eklemiş olursunuz.