Builder

web application developer blog

font awesome, entypo gibi font ikonları nasıl özelleştirebilir ve dosya boyutunu küçültebiliriz?

font awesome, entypo gibi font ikonları kullanmak, pek çok geliştiricinin hem projeleri daha hızlı geliştirmesine, hemde css yazımında daha esnek davranabilmesine olanak sağlamaktadır. Bu da kaçınılmaz bir şekilde her gün daha fazla geliştiricinin font ikon kullananlara katılmasını sağlamaktadır.

Ancak ne var ki bu yöntem, geliştirme maliyetini azaltıyor olsa da, geliştirme sonrası, sürdürülebilirliği yani sunucu maliyetini arttırmaktadır. Çünkü özel bir fontu sitede kullanmak demek, her bir font için yaklaşık 400kb sayfa yükünü arttırmak demek.

Bunu optimize etmenin yolu nedir?

Mantıksal olarak, eğer kullanmadığımız ikonları fonttan çıkartırsak, font boyutunu da değiştirebiliriz. Bunun için çeşiyli python scriptleri bulunsa da en kullanışlısı bunu web üzerinden yapmak.

iconmoon.io böyle bir site. Dilerseniz, hazır iconmoon fontu üzerinden seçiyorsunuz isterseniz, kendi ikonunuzu svg formatında upload ediyorsunuz. Hatta her bir ikon üzerinde küçük değişiklikler yaparak da özelleştirebiliyorsunuz. İşiniz bitince de download ediyorsunuz.
Dosya seçimi
Import Icons ile fontunuzun svg formatında olan dosyasını seçin.
ikon seçme
Kullanmak istediğiniz ikonları seçin
ikonu özelleştirme
Kalem butonu ile tıklatığını ikonda küçük değişiklikler yapabilirsiniz de.
download etme
Son olarak Generate Font bölümüne gidip download butonuna basarak özelleştirdiğimiz ikon fontunu indiriyoruz. Çoğunlukla projlerde en fazla 30 ikon kullanılır. 30 ikonlu bir font ise en fazla 10k lık bir dosya olacaktır.

100 kullanıcı için 400k * 100 = 40Mb yerine 10 * 1000 = 1Mb Trafik maliyeti bence küçümsenmemeli. Ayrıca düşük bağlantı hızlarında olan kullanıcılar için sayfa açma süresinin artacağı da unutulmamalı.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir