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!
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:
- Designer designs the icons
- The icons are created in a vector format
- Multiple icons are turned into fonts
- Those fonts are converted into the formats needed for the web
- Special HTML and CSS are needed to have a system to display the icon font glyphs
- Optimizations are needed to make things efficient
- 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.
If you need more information about icon fonts and working with them, here are some recommended links:
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:
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 with Node.js. That was a most complicated adventure. Everyone who had to work with ttf 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
ttffont does not have a “postscript” field in names table, it will not be exportable in Mac’s fontbook. - In
eotformat, 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!
1 My vision for how big modern forums should be built can be seen in this demo. It is HTML5, Ajax-powered, uses the history API and tons of other sweet technologies.
Oh wow, this rocks!
So we get a full client-side solution to font conversion AND a very snazzy interface to do it in?
This is a really neat open-source project.
I find FontForge a bit tedious to deal with, so this is a nice shine of light for those that enjoy the browser-based likes of icoMoon but want to add their own extra touches or ditch the need for so much tasks being done server-side :)
If you need universal browser solution, not limited with iconic fonts, some additional work should be done:
svg2ttf – “full” font conversion requires care about kerning and ligature ttf tables. We had no practical needs to implement it, because we do only iconic fonts. But that’s not very difficult, if someone decide to improve.
ttf2woff – requires replacing binary async deflate library from node.js to sync one, written in js (sources exists).
ttf2eot – should work in browser, but nobody checked :)
IcoMoon is far ahead. I’ll be writing about it soon :)
Do you mean far ahead from your promises to open-source it?.. :)
I never “promised” I will open source IcoMoon. I had some plans to do so but at the moment, I prefer working on it alone. But perhaps in future I might open source it.
IcoMoon is far ahead in terms of its features and more importantly, its end results compared to other solutions. Fontello’s font icons look blurry even when used at the right size.
When you can’t do something, you just troll everywhere with foggy promisses, that you are not going to obey. It was funny how you fooled people at github about icomoon, when they tryed to explain you, that github is for opensource projects.
In fact, you just make a good buisiness with parasitizing on opensource works. And invent fake statements about fontello, to show your project better, than it really is.
Come back to real life. That’s a technical article, not marketing contest.
@puzrin What is it exactly that you’re suggesting I can’t do? I didn’t fool anybody. I used to use github’s issue tracker and I had plans to make IcoMoon open source but I simply changed my mind. At least for now.
I have contributed to open source projects and I will continue to do so when I can. While rewirting the new version of IcoMoon, I encountered some bugs in angularjs and made pull requests (which got accepted). That’s just one example.
From your article:
The new version of IcoMoon (silently released on October 17), uses my own javascript library which I wrote myself, and it does not use fontforge on the server side. And by the way, my library supports ligatures. The whole process of generating fonts is done on the client side. Fontello on the other hand sends requests to the server when you hit the download button; and therefore it won’t work when you’re offline. The IcoMoon app can work entirely offline.
My claim isn’t “fake” or “invented”. Fonts generated with fontello look blurred. Here’s an example:
Screenshot
demo.html (icomoon)
demo.html (fontello)
This example shows 3 icons selected from the “iconic” set. This icon set was designed on a 16×16 grid. I adjusted fontello’s demo to show the icons at 16px. It originally showed them at 14px (which made them look even worse). This example clearly shows how fontello fails compared to IcoMoon.
I should to clarify one thing regarding my example. This pixel perfection only matters on regular screens. On displays with high PPI, you won’t be able to see the imperfections and blurred edges.
@keyamoon, everybody know, that github is for opensource projects. You used community human resources for a long time, to collect info for icomoon in github’s issues tracker. And community credited you with your unclear promisses, because it beleived, that you are really one of opensource developper. In the end you just deleted repo. Nobody care about your plans and your mind changes. I just say, what exists on current moment. Your contributions are well seen in your profile – it’s about zero.
In fonts, that you generate you don’t provide info, how to credit authors of used icons. That’s essential thing in opensorce. You just take other works and break feeadback principles of opensource development. Your own “free” icons have GPL license, that’s not compatible with many types of projects like themes, MIT-licenced and others.
Also, you say, that your app has ligatures & offline generetion, and forget that fontello has API, correct rendering at preview and more easy & simple interface. Why do you think that your features have more advantages? That’s just a zero-value wow-factors, that helps for marketing and selling. But you came to comments and just say “my app is better”. May be, it’s better for you, because you make money with it :) ?
Then you take outdated iconic, that is downscaled in fontello to better balance with text, compare it in 16px and propagate result to ALL fontello fonts. Nice joke. Why don’t you take more modern and popular FontAwesome & Entypo? Why don’t you compare hinted fonts, when size is out of grid? I think, because you just manupulate facts, as usually, to promote your commercial service.
Icomoon and fontello have different sets of features. But that doesn’t mean, that icomoon is “something special” and “far ahead”. Users should decide that, not you.
I have nothing against making money. But as i said above, you use opensource works with almost zero feedback and try to black PR for really opensourse project with advertising your commercial one. That looks very strange. And i don’t think, that it’s fontello’s problem :)
@puzrin My github profile shows that I have contributed to several open source projects. I usually do so when I encounter a bug or something. Not sure why you’re saying it’s “almost zero”.
The library tab of the IcoMoon app shows license information for each set. I changed the license of my free icon pack to GPL because WordPress theme developers asked me to. It used to be CC BY 3.0. If Other theme developers ask for another license, I may change the license again.
I didn’t want to list all the features of IcoMoon here in the comments. I felt it would be more appropriate if I write a complete article about IcoMoon. I could compare IcoMoon with fontello feature by feature if you like. Have you seen IcoMoon’s preview tab at all? It also uses @font-face in case you didn’t know. I don’t use cufon or raphael. In fact, if you change your font’s metrics (like baseline) in IcoMoon, the preview gets updated and you can see your changes live. IcoMoon also has a very simple interface. Users should decide which one is better.
As you wish, let’s compare FontAwesome. I only picked iconic randomly. I didn’t know it was “outdated” in fontello. Here’s another example with icons selected from FontAwesome. Both demos show the icons at 14px, which is the size fontAwesome was designed for:
Screenshot
demo.html (IcoMoon)
demo.html (fontello)
Same result with or without enabling “hinting” in fontello. As I’ve said before, your font hinting doesn’t seem to make any difference except for increasing the size of the font!
I’m not sure how to address the rest of your comments as I don’t understand them fully. No offense but you might want to consider improving your English.
@keyamoon, couple of your commits on github do not make you opensource developper. And that doesn’t change, that your main activity on github was in icomoon repo, where you fooled people about real app nature for a long time.
Showing font attrs at your site does not replace license file in generated archive and explanation how users can credit authors of artworks. You consume opensource in one way, just to promote you proprietary app & paid services. And try to disqualify opensourse project, that prevents you to make business more profitable.
Not sure, that i need “honest comparison” from expert like you :) . I don’t know how do you make tests and screenshots, but both your last examples are absolutely chrisp under Ubuntu + FF/Chrome. Sorry to disappoint, but your sensation about poor fontello results is just a speculation on custom case. Probably caused by different ttf/woff sequence in fontface. The same about hinting – try it at different platform first, prior to explain that “it doesn’t work”.
By the way, you always point to “mistake”, that fontello is not the only app that don’t use fontforge. Fontello moved to new font generators several months ago, you are far from been first here. Fonts for chrisp preview are used for years. And this article was written one week before your app update :) . Also, that doesn’t change situation in global – fontello shares it’s libraries to community, it covers more wide area, than your commercial service for font generation.
PS. if you are not comfotable with my english – no problems, speak russian.
You are insulting me without knowing the full story. I wasn’t trying to fool anybody on github. I had clearly stated that the repo was empty and I was simply using the issue tracker. I had actually seen Chris do it with css-tricks and so I thought it must be acceptable to only use the issue tracker.
Adding a license file to packages generated by IcoMoon is actually in my to do list. The old version actually did that.
In case you are willing to improve your service instead of ignoring facts, my screenshot was taken in OS X on Chrome. You will get the same result in Safari.
Instead of insulting me, try to compare fontello’s features and end results with IcoMoon’s.
@keyamoon, your plans, dreams and promisses can not be taken into account. My attitude depends on things, that you have right now, and what you did in the past. If you consider normal practice to attaсk opensource projects in aggressive manner – don’t be surprised, when someone remember all your “mistakes”, been done in opensource community. Without discounts on your explanations.
Just a couple of quick checks with your app:
test1.
Add only FontAwesome and Entypo
Select all glyphs (~700)
Try to go to preview tab
VERY slow. Compare with the same on fontello.
test2.
The same, but with WebhostigGlyphs (~2000 selected ). After click on preview app freeze for a long time, then show preview with broken font.
All in FF/Chrome under ubuntu.
Even if i skip comments about some strange interface solutions, it seems that your last app is in very deep beta. May be, sometime later it will become better. But right now even interface has serious lags. You try to compare stable fontello with your imaginated future version, “when it will be ok”. With huge exaggerations in your favor. That’s not serious and not ethical.
If you need more respect – stop marketing buzz and trolling. Make your new app stable first. And be less categoric and more correct with your comparisons. You are not “the leader of industry”, and you are not the only one, who know how to make good progects.
The two tests that you provided don’t even matter when it comes to actual and practical usage of the app. But I appreciate any feedback as it only helps me improve my service. So, thank you for that. And good luck solving fontello’s font rendering issues under OS X.
Very interesting article, interesting perspective.
Just FYI the link in the second bulled under “Bye-bye FontForge” is kinda broken…
thx fixed
I don’t understand why single-color is a con. Doesn’t make any sense, it’s a font! You can color it the way you want…
Think of icons like this: https://www.iconfinder.com/iconsets/flat-services-icons
Single-color meaning each single icon can only be one color.
Not exact term. That’s not a con, but technical limitation. Multicolor is impossible now with fonts. And yes, almost nobody cares about it :)
Vitaly, I’m amazed by how generous you are!
Offer this tool for free, with no commercial motivation, is a great gift :-)
“Fontomas” was an inspiration when I started my similar (but commercial) Fontastic project.
I liked the almost “non design” look of Fontomas, which made the interface very light and non cluttered.
I also remembered that you helped to find my first developer for Fontastic, that was also very generous.
Keep up the good work, we will probably use your new library for SVG transformations for our next Fontastic features.
For those who don’t know it yet, check my own icon font generator here: http://www.fontastic.me
We make creating icon fonts a fun experience!
Woow!! nice work mate..
developers like you give us some relief :)
I just discovered Fontastic.me today – what a great resource, and it makes total sense to be able to ‘roll-your-own’ icon fonts and include only what you need for a project. A responsive design friendly solution for every web developer! I hope you can keep the basic features free & Good luck with this project!
I cannot agree with “Fontforge is not convenient for automated font processing”.
Fontforge supports native scripting (of its own) and Python extension. I also see a few extentions for other languages (e.g. Lua).
I use the C library of Fontforge myself in my project pdf2htmlEX, which works pretty well.
Speaking of svg2ttf, there’s a utility called FontCustom, which also used Fontforge.
But I do agree with “Fontforge has strange bugs that require specific workarounds”, it has not been quite optimized for extensions until recent. But it has been much improved, many people use only Fontforge scripts instead of the editor.
Sorry, if my words could be accepted as “FontForge is bad”. I had no intention to do so. For a long time, FontForge was the only opensourse choice for font scripting. That’s a huge acheivement. And of cause, svg2ttf/ttf2woff/ttf2eot will never pretend to do “all the same but better”.
I just mean, that for specific tasks like icon fonts generation, writing JS libraries gave significant benefits. Even if we skip discussing workarounds and other complex technical details, ability to create fonts in browser is a killer-feature :) . Also, specialized convertors are more simple in installation if you develop in node.js – no binary dependencies.
For historical reasons, i still keep set of FF scripts, used earlier in fontello https://github.com/fontello/font-builder . It was created much earlier FontCustom, but never promoted as good independent library.
PS. I’m familiar with pdf2htmlEX, big thanks for your progect.
@Vitaly Puzrin Thanks for your explanation! No offsence, I just thought the original expresstion was kind of misleading. But indeed Fontforge might be too complicated.
I guess I could imagine your efforts behind the libraries, I remember that I had to read the TTF specification for a few times, and spent hours in testing in order to understand the tricky combinations of ascend/desend. But OMG you have to generate real TTF fonts…
fontello/font-builder, oh I knew I had seen that name before. One of the scripts,font-merge.py, was the script I read before I found FontCustom, although I didn’t know the history until now. This script, and also the one from FontCustom, made me realized that FontForge is capable of loading individual SVG images as glyphs.– I’d never find those functions in the documentation myself … — No way for me to implement Type 3 font support in pdf2htmlEX without them. Thanks! (And glad to hear that you like pdf2htmlEX)I’m still a little bit confused about “creating fonts in browsers”, I thought you meant everything is built upon node.js, which is not the JS running in browsers? Please correct me if I’m wrong.
Btw, I don’t know how to reply to your comment, since there’s no such link on your comments, probably because that’s already a reply. Let me see if my hacking works…
@Lu Wang
When you write code for
node.jsand don’t use node’s built-in libraries and other blobs, it’s possible to “browserify” your code later to execite in browser. If you are interested, i’d recommend to start investigation with this 2 projects:es5-shim – “fix” old browser to support most useful ecmascript 5 feature
webmake – assemble node’s commonjs modules (with nested
require(...)) to single file, good for browser.The real client bundling process in fontello is much more complex, but 2 links above are enougth to understand principles.
Yes, that’s not mistake, fontello uses
svg2ttfon client side too. It’s easy to check without digging into sources. Open browser devtool, import custom image/font, and check, that no server request done. Then go to DOM tab, and you will see that icons are displayed via @fontface.@Vitaly Puzrin I see. Thanks for the pointers, looks interesting. I’ll check them out!
I remember previously using this. Your article made me go back to it and try it again it’s working perfectly, thanks. :)
You can get Facebook clone script here http://facebookclonescript.com
Very cool. Am starting to use icon fonts when developing and this should quite useful.
Appreciate the tip about FontAwesome looking sharpest at increments of 14px, didn’t release it had a sweet spot, makes sense though.
I use Fontello every day for my work for more than a year now. It’s an incredibly useful project ! Developers and Repo maintainers are listening to requests, answering quickly and wisely :) The new “import your custom SVG” feature makes Fontello even better. Thanks for your work guys.
Allowing everybody to share custom fonts created in Fontello would be awesome.
For people looking for another alternative allowing to store font sets in an account, there’s also http://fontastic.me/.
Hi Nico!
Please, create a ticket with description, how shareing feature can be used. If sharing for limited time is enougth, that can be done.
+1 on Fontastic. I’ve tried all services and i’m most satisfied with fontastic. It’s more intuitive and just all around works great. The support is awesome as well.
Both Fontello and IcoMoon has to work on their designs. Seeing Fontello based on Twitter Bootstrap is embarassing considering the size of the project. Shouldn’t take that much effort to strap some custom design.
One big con of icon-fonts is their lack of responsiveness.
When I use eg. the bootstrap grid, I have to trigger the icon-fonts with a type-plugin like flowtype in order to adjust the icon to the variable grid size.
This is annoying because these kind of plugins always interfere with other plugins like modal-windows and such.
Haven’t tested this for conflicts alongside any other plugins but have you tried FitText.js?
I am a HUGE fan of Fontello. Wrote a fairly short article about using icon fonts with Fontello. Quite basic but just thought I’de share.
OFFTOPIC – @Todd, I saw your article about Fontello and from the screenshots I think you’re using Sublime Text. If you are, what theme are you using? I like the code coloring theme you’re using.
Thanks in advance.
Hi, I do use Sublime Text, but they were not screenshots. They are code samples I have pasted into the post.
Please can any further comments about my blog post be posted on wearewebheads.com, thanks. (sorry about this Chris)
I’ve been using fontello form some months, and actually wasn’t even using icon fonts before because it seemed very annoying to get a whole font for 1 or 2 icons in it. It’s really a great product, and now I see all that complexity behind-the-scenes, I find it even greater. Keep on the good work man ! Truly useful ! Thank you so much !
Fontello, a great solution for responsive site development and design – Well done Vitaly – soon to become my favorite site!!
Vitaly,
I’m wishing we were in the same town as I would love to buy you a beer/coffee/vodka or ten. Fontello has saved me so much effort on many projects. What was interesting for me today was that I was able to set the unicode values of each of the icons so that I was able to build up a partial alphabet (well I could have done the whole thing, but I only needed 4 letters), where 2 of the icons were SVG’s of my own creation.
I cannot begin to describe the hassle I use to go through with FontForge to get to the same place.
Personally, I cannot thank you enough for your efforts. As soon as I get time I will SVG an icon set or two of the social networks that I have created in the past.
Everybody’s talking about font icons being the future, and with your article I start seeing it. But icons are not only pictograms.. what about more complex shapes?
Somehow I can’t show my Fontello Icons with IE 11. Has anyone a solution for me?
lol Aliens = Apple and Predators = Microsoft :)