Google Web Fontları Nasıl Optimize Edilir?

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.

Google Fonts Bilgisayara Indirme Zip

İ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.

    Subsetting Font Optimize Website
  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.

Preload Html Fonts

Popular Eğitimler

HTML’de Faydalı 5 Harika Visual Studio Code Eklentisi

Bir süredir VS Code kullanıyorum ve kesinlikle VS Code kullanımını çok pratik…

CSS Yazı Tipi (Font) Özellikleri

Paragraflarda, başlıklarda, sayfa içerisindeki metinlerde yazı tiplerine nasıl müdahale edebileceğimiz, herhangi bir…

jQuery ve DrawSVG ile Hareketli SVG İkon Kullanımı

Web sitenizde hareketli SVG (animated SVG) kullanımı nasıl yapılır? Web sitelerinde göze…

cPanel ile 1 Dakikada WordPress Kurulumu

Bu eğitimde WordPress kurulumu yapacağız, ama WordPress’i cPanel üzerinden kuracağız. Bir hosting…

Google Analytics.js ve Leverage Browser Caching Sorunu

Sitenizi GTMetrix veya Google PageSpeed gibi site hızı ölçen web sitelerinde test…

ScrollReveal ile Scroll Animasyonları

ScrollReveal, sayfanızı aşağı doğru kaydırdığınızda, sayfa içindeki elemanların hareketli bir şekilde yerine…