{"id":153945,"date":"2013-10-25T08:45:51","date_gmt":"2013-10-25T15:45:51","guid":{"rendered":"http:\/\/css-tricks.com\/?p=153945"},"modified":"2017-04-12T18:01:35","modified_gmt":"2017-04-13T01:01:35","slug":"fontello-past-future-icon-font-service","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/fontello-past-future-icon-font-service\/","title":{"rendered":"Fontello: The Past and Future of the Icon Font Service"},"content":{"rendered":"

The following is a guest post by Vitaly Puzrin, the developer behind the icon font service Fontello<\/a>. I’m also a fan of IcoMoon<\/a>, a similar service. But I’m also a big fan of competition, sharing thoughts, and open source software, so thanks Vitaly!<\/em><\/p>\n

<\/p>\n

<\/p>\n

My Past<\/h3>\n

I used to be big into radio-controlled models. I actually run the biggest Russian-speaking community<\/a> about radio-controlled models. That website still supports me today and frees me up to work on other projects. Today, I develop software with small team, just because I like programming!<\/p>\n

My programming days started when I decided to completely rewrite software for RC Design. For many years me (and later me and my team) developed components for IPB and vBulletin forums. Eventually we decided we were spending too much time altering 3rd-party software to what we needed. The most popular forums are commercial, and they are optimized for best sales<\/em> instead of best quality<\/em>. <\/p>\n

So in our case, spending a couple of years in development is justified1<\/sup> in the long term for our medium-sized project.<\/p>\n

The first Fontello release<\/h3>\n

While investigating new technologies, I became excited with idea of using web font to show graphics. It is very convenient from a development perspective. <\/p>\n

It was strange at first. Why were there so few icon fonts available? Why wasn’t everyone using them? In my opinion, it is because of a process breakdown. The process from idea to use is fairly long and complex:<\/p>\n

    \n
  1. Designer designs the icons<\/li>\n
  2. The icons are created in a vector format<\/li>\n
  3. Multiple icons are turned into fonts<\/li>\n
  4. Those fonts are converted into the formats needed for the web<\/li>\n
  5. Special HTML and CSS are needed to have a system to display the icon font glyphs<\/li>\n
  6. Optimizations are needed to make things efficient<\/li>\n
  7. Front end developers need to actually do it<\/li>\n<\/ol>\n

    The process can fail at any one of these steps. That becomes especially likely because it involves different people: designers and developers. There can be a gap between these people.<\/p>\n

    The first Fontello release served to cover this gap by making it easier for everyone. It contained several icon fonts that were already ready to go. You still can find first release in the GitHub archive<\/a>.<\/p>\n

    Why use icon fonts?<\/h3>\n

    Just so we’re all on the same page, I’ll summarize the pros\/cons of using webfonts to display icons.<\/p>\n

    Pros<\/h4>\n