Ana SayfaWeb TasarımGoogle Web Fontları Nasıl Optimize Edilir?

Google Web Fontları Nasıl Optimize Edilir?

YouTube'ta Takip Et →

Google Web Fontları, web geliştiriciler için büyük destek sağlıyor. Peki site hızına önem veren geliştiriciler için daha hızlı ve optimize edilmiş web fontları kullanmak mümkün mü?

Google Fonts adresine girerek, web sitemizde kullanmak istediğimiz fontları indirelim. Evet, Google Fonts web sitesinden, sitelerimizde kullanabileceğimiz, hatta Photoshop veya Illustrator gibi programlarda kullanmak üzere bilgisayarımıza kurabileceğimiz TTF fontlarını indirebilme imkanı bulunuyor.

İndirdiğiniz fontların sağ tarafında boyutlarını, yani bilgisayarda kapladığı yeri görebilirsiniz. Bu değerler, web sitenize girdiğinizde ziyaretçilerin indirecekleri boyutlardır. Web sitesi optimizasyonlarında en küçük bir boyutun bile önemli olduğunu düşünürsek 160kb bir ziyaretçi için fazla sayılabilir.

İndirilen fontlar kendi içlerinde çeşitli gruplara, alt kümelere ve karakterlere ayrılıyor. Normal bir web siteniz varsa muhtemelen bu karakterlerin hiçbirini kullanmıyorsunuz, sadece numaralar ve Latin harflerini kullanıyorsunuzdur. Bu durumda fonttaki diğer karakterlere ihtiyacımız olmadığından onları eleyerek yeni bir font oluşturacağız. Bu da font boyutuna yarayacak ve web sitesi hız testlerinde sitenizin hızı daha da artacak. Bunu Python’un FontTools aracını kullanarak pyftsubset komutuyla yapabiliriz. Ama size daha kolay bir yol göstereceğim.

  1. Webfont Generator‘ü açıp webde kullanmak istediğiniz TTF fontunu buraya yükleyin ve Expert seçeneğini seçin.
  2. Font Formats alanında WOFF ve WOFF2 seçeneklerini seçelim. Bu iki formatta yükleyeceğiz sunucumuza.
  3. Subsetting alanı bizim için önemli. Custom Subsetting seçeneğini seçerek çıkan alanda hangi karakterlerin kalacağını ve gideceğini seçiyoruz. Character Type seçeneğinde Lowercase, Uppercase, Numbers ve Puncuation seçeneklerini, Language alanında English ve Turkish seçeneklerini, Unicode Tablet alanında Basic Latin seçeneğini seçiyorum. Subset Preview alanında hangi karakterlerin kaldığını önizleme olarak görebiliyorsunuz.

  4. Son olarak da Base64 Encode seçeneğini seçerek bilgisayarımıza gerekli dosyayı indirelim. Bu zip dosyası içinde, bizim ihtiyacımız olanlar WOFF ve WOFF2 uzantılı font dosyaları var. Yukarıdaki işlemleri yaparak 161KB’lık bir font dosyasını 13KB’a indirdik. Bu çok iyi bir sonuç.

Küçültülmüş fontları style.css üzerinden çağırıyoruz. Böylece Google Fonts’un JS dosyasına veya Google Fonts’un sağladığı font dosyalarına ihtiyacımız olmadan bu fontları kullanabiliyoruz.

@font-face {
    font-family: RobotoSlab;
    src: url(RobotoSlab.woff2) format("woff2"),
       url(RobotoSlab.woff) format("woff");
    font-weight: 700;
    font-display: swap;
}

Fontların boyutlarını küçülttükten sonra, font dosyalarının sonradan yüklenmesini engellemek için aşağıdaki HTML ön yükleme kodlarını kullanıyoruz.

<link rel="preload" href="RobotoSlab.woff2" as="font" type="font/woff2" crossorigin>

Bu kodu HEAD etiketleri arasına yazın. Bu kodlar sayfanızda ilk olarak font dosyalarının yükleneceği anlamına geliyor. Birden fazla font kullanıyorsanız, peşisıra yazabilirsiniz. Developer Tools’da baktığınızda ilk sırada yüklenen, bu font dosyası olacaktır.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.