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.
Import Icons ile fontunuzun svg formatında olan dosyasını seçin.
Kullanmak istediğiniz ikonları seçin
Kalem butonu ile tıklatığını ikonda küçük değişiklikler yapabilirsiniz de.
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ı.