{"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 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 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 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 Just so we’re all on the same page, I’ll summarize the pros\/cons of using webfonts to display icons.<\/p>\n If you need more information about icon fonts and working with them, here are some recommended links:<\/p>\n After our first release, Fontello (then called “Fontomas”) got very good reviews. With validation that the project was useful, we had renewed enthusiasm to make it even better. I also decided to use Fontello as a sandbox for testing new technologies I wanted to play with, like websockets, new libraries, and so on.<\/p>\n Around the same time, new professional (and open source) icon fonts appeared: Entypo<\/a> & FontAwesome<\/a>. We included them in Fontello straight away.<\/p>\n For the best cross-browser support, there are four<\/em> font formats are required for web: As far as I can tell, everybody finishes the process using FontForge<\/a> on the server side. The Hinting is a technology to make letters more readable at small sizes. Since the topic is quite complicated, I suggest you look at the wonderful introduction<\/a> on site of ttfautohint utility.<\/p>\n Fontello can add hinting with ttfautohint. In the past, ttfautohint worked only with text fonts, because it used the letter O to snip base font metrics. But I sponsored support for iconic fonts, so now it can hint those as well.<\/p>\n Is hinting good for iconic fonts? Honestly, that depends… I suggest experimenting with your project and comparing results. Can your font be sharp without hinting? Yes, if it\u2019s pixel-perfect: only displayed in one size, specifically drawn for that size. For example, Entypo font is sharp at 20px, and FontAwesome is sharp at 14px. To see this, go to the Fontello site and drag the size slider around and see how the look of the icons change.<\/p>\n I decided to spend some time improving the interface of Fontello.<\/p>\n When you find and icon you like, it\u2019s very convenient to see how that icon combines with text. We do that in Fontello’s second tab, which doubles as the place you change names:<\/p>\nMy Past<\/h3>\n
The first Fontello release<\/h3>\n
\n
Why use icon fonts?<\/h3>\n
Pros<\/h4>\n
\n
\n
Cons<\/h4>\n
\n
\n
Next steps<\/h3>\n
Font format troubles<\/h3>\n
woff<\/code>,
ttf<\/code>,
svg<\/code> &
eot<\/code>. But if you try to find libraries for font generation, you won’t find much help. Especially for
ttf<\/code>.<\/p>\n
eot<\/code> and
woff<\/code> formats are just containers for
ttf<\/code>. There are some open source conversion projects, like one for ttf to eot<\/a>, and http:\/\/code.google.com\/p\/ttf2eot\/ and ttf to woff<\/a>. These work and we use them.<\/p>\n
Hinting<\/h3>\n
Interface details<\/h3>\n