Fontello: The Past and Future of the Icon Font Service

Fontello: The Past and Future of the Icon Font Service
The following is a guest post by Vitaly Puzrin, the developer behind the icon font service Fontello. I’m also a fan of IcoMoon, a similar service. But I’m also a big fan of competition, sharing thoughts, and open source software, so thanks Vitaly!

Freelancing Design and Download Themes. Download Responsive themes for CMS, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

 

My Past

I used to be big into radio-controlled models. I actually run the biggest Russian-speaking community 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!

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 instead of best quality.

So in our case, spending a couple of years in development is justified1 in the long term for our medium-sized project.

The first Fontello release

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

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:

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

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.

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.

Why use icon fonts?

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

Pros

  • Fonts are vectors, so there is no pixelation or blurring on high-resolution screens as there would be if the graphic was raster and needed to scale up.
  • The browser support is as good as you need it to be
  • Once the system is in place, using them is very convenient.
    • Arguably easier than spriting images.
    • They can be controlled with CSS, like the size, color, shadow, etc.

Cons

  • The icons will be single-color. There are some fancy (hacky) techniques for multi-color however, and modern trends and HIGs (human interface guidelines) suggest single colors anyway.

Next steps

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.

Around the same time, new professional (and open source) icon fonts appeared:Entypo & FontAwesome. We included them in Fontello straight away.

Font format troubles

For the best cross-browser support, there are four font formats are required for web:woff, ttf, svg & eot. But if you try to find libraries for font generation, you won’t find much help. Especially for ttf.

As far as I can tell, everybody finishes the process using FontForge on the server side. The eot and woff formats are just containers for ttf. There are some open source conversion projects, like one for ttf to eot, and http://code.google.com/p/ttf2eot/ and ttf to woff. These work and we use them.

Hinting

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 on site of ttfautohint utility.

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.

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’s 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.

Interface details

I decided to spend some time improving the interface of Fontello.

When you find and icon you like, it’s 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:

Freelancing Design and Download Themes. Download Responsive themes for CMS, Joomla, WordPress, Magento, Opencart, HTML, Jquery and Plugins. Hire Freelancers and design your website according your business needs.

The only correct way to do this is literally display the icon via @font-face. Any other technique (like raphael or) cuffon will never fit right to font metrics. So there was a serious problem:

  • We have to store our icon collections in web fonts.
  • We can’t do so for custom icons. Rebuilding font for every custom icon on server side is complicated and expensive.

Since the big goal was to improve the interface and do it right, I decided to temporary abandon the importing feature and concentrate on interface usability. Let be honest: very small percent of people really needs custom icons. Maybe that’s not good for the “wow-factor”, but Fontello is not a commercial project, so it can ignore some business rules.

Another usability example is Fontello’s site design. Basically: no design :). Just plain Twitter Bootstrap. Why? Because Fontello is just a development tool. A tool like this should not be beautiful, it should be convenient. Fontello let’s you:

  • Search icons
  • Quickly preview result
  • Change class names for your specific project

That’s all available & accessible.

API for developers

Programmers had some specific requests and ideas for Fontello:

  • They keep code for their projects in version control repositories. They want to store their web fonts there too.
  • They don’t like to drag files with the mouse.
  • They want a simple way to load projects from repos, update them, and move the result back to the repo.

Several months ago we completed an API to make all that possible.

Bye-bye FontForge

FontForge is nice as an editor, but it’s not convenient for automated font processing. It has strange bugs that require specific workarounds.

Ultimately I decided to spend the resources to write font convertors from scratch withNode.js. That was a most complicated adventure. Everyone who had to work withttf binary format can tell you, it was designed by Aliens for Predators. Anyway, that nightmare is now over, and you can enjoy final result:

Also, we created a nice library for direct SVG paths transformations (scale, translate, absolute <-> relative coords, and size optimization).

Of cause, Fontello is not a completely unique project. The idea to combine/shrink fonts is trivial. But as far as I know, it’s the only one in this area, that has dig into development this deep, and share all the achievements under an open source license.

Here’s some interesting facts not documented anywhere else:

  • If ttf font does not have a “postscript” field in names table, it will not be exportable in Mac’s fontbook.
  • In eot format, font-family must begin with the full name, otherewise IE will not render it.

Thanks to open source development, someone posted this info in our GitHub issue tracker.

Back with custom icons

Since our font convertors were written in Node.js, it was not a big deal to make code work in the browser. Now, Fontello dynamically creates ttf font for imported images on client side, and injects it into page via data-URI.

On the preview, you see the icons exactly as they will be in the generated fonts. In theory, we should use woff format. But as all modern browsers are OK with ttf, and we don’t care much about IE6 support, we use ttf to save some time by not porting to woff first.

How do I request a new feature?

You can request anything you’d like on GitHub. Even crazy stuff! Just ask yourself two questions: 1) Will it be really useful to you? 2) Will it be useful for other people?

Here is one example. Sometime people ask why Fontello does not provide user accounts to store projects on our server. Here’s our thoughts:

  • Keeping user data is a big responsibility. To keep quality of service high, that requires investment and that means running Fontello like a business. Since Fontello is positioned as non-commercial project, we don’t want to push it toward being a business.
  • Users don’t need accounts, they need good importing and exporting. This can be achieved in better way:
    • Every generated font pack already has config file which can be loaded back into Fontello to continue work. Just drag it (or the whole archive) onto the Fontello site. Or use the API, as described above. Easy!
    • Use GitHub to store your projects and control changes. That’s much more safe and protects you from mistakes.

Every new feature request is judged in terms of added value. Accounts can be good for making a buisness, but they don’t add noticeable value to Fontello users. Thats a mysterious idea, like placing email/password fields twice on registration form – everybody do so, but nobody can explain why.

The Future

You can look at the complete version history here.

The next big step is search improvement: allow people to update search tags, show related icons, and so on. Some information can be extracted from user actions, like analyzing changed class names.

Also, it would be good to better connect designers and programmers. I feel this area is not still covered as well as it could be. Making a full icon font is a very big job. Many designers have just a few icons they want to share, but… where? Allowing everyone to publish their icons on Fontello would be interesting. That requires a serious interface redesign. So, if you are interface guru and wish to participate, please get in touch!

14,522 total views, 6 views today

Loading Facebook Comments ...

14 Comments. Leave new

estate agents in Brookmans Park
March 13, 2015 2:36 pm

It is appropriate time to make some plans for the future and it is
time to be happy. I have read this posst andd if I could I desire to suggest you some interesting things or suggestions.
Maybe you could write next articles referring to tthis article.
I desire to read even mmore things about it!

My web-site; estate agents in Brookmans Park

Reply
Brookmans Park houses for sale
March 14, 2015 9:09 pm

I got this web page from my friend who informed me
concerening ths web page and noow this time
I am visiting this sire and reading vvery informative articles or reviews
here.

Also visit my blog Brookmans Park houses for sale

Reply

What’s up, aall the time i used too check website posts here early in the dawn, as i like to
learn more and more.

My homepage :: estate agents Totteridge (Candace)

Reply

For hottest news you have to pay a visit web and on web I found this web page as a most excellent web site for newest updates.

my web-site estate agents in Hadley Wood – Earnestine

Reply

Thanks for the Comment! :)

Reply
estate agents in hadley wood
March 16, 2015 6:14 pm

Thanks ,I’ve just been lookinhg for information about this subject for ages
and yours is thee greatest I’ve found out so far. But, what
iin regards to thee bottom line? Are you certain abou the source?

Feel free to surf tto my blog … estate agents in hadley wood

Reply

Excellnt pieces. Keep writing such kind of information on your blog.

Im rrally impressed by your blog.
Hi there, You’ve done a great job. I will definitely digg it
annd personally suggest to my friends. I am confident they’ll be benefited
from this website.

my page – property ffor sle Hadley Woodd (Loren)

Reply
letting agents Radlett
March 18, 2015 8:15 am

Hello to every one, since I am truly keen of reading this
webpage’s post to bee updaterd daily. It contains
pleasant information.

Visit my web-site … letting agents Radlett

Reply

Hi my name is Janette and I just wanted to drop you a quick note here instead of calling you. I came to your Fontello: The Past and Future of the Icon Font Service page and noticed you could have a lot more traffic. I have found that the key to running a popular website is making sure the visitors you are getting are interested in your subject matter. There is a company that you can get targeted traffic from and they let you try the service for free for 7 days. I managed to get over 300 targeted visitors to day to my site. Visit them here: http://klick.onl/Z

Reply
http://www.calabriatechnology.com/
March 26, 2015 2:24 am

I think this is a real great post.Thanks Again. Want more.

Reply
update international ep
April 5, 2015 5:21 pm

Its like you read my mind! You appear to know so
much about this, like you wrote the book in it
or something. I think that you can do with some pics
to drive the message home a little bit, but other than that, this is wonderful blog.
A fantastic read. I’ll certainly be back.

Reply
mens cotton turtleneck
April 16, 2015 3:23 pm

Hi there, just became alert to your blog through Google, and found that it’s truly informative.
I am gonna watch out for brussels. I will be grateful if
you continue this in future. Numerous people will be benefited
from your writing. Cheers!

Reply
bestdatingsitesnow.com
May 11, 2015 2:34 pm

Great article, just what I was looking for.

Reply

I’ve been surfing online more than 4 hours today, yet I never
found any interesting article like yours. It’s pretty worth enough for
me. Personally, if all webmasters and bloggers made
good content as you did, the web will be a lot more useful
than ever before.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Enter the captcha code *

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.

Coupon Code "HAPPY10" - Get Discounts upto 90% + 10% off on Purchase of themes/templates and Plugins