Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Ive seen many examples of people using icon fonts but I am wondering what is the best way to execute this process. An example of icon fonts: Raphaël Icon-Set via @font-face. A tutorial I have read. Any ideas on how to go about creating these?

share|improve this question
    
If it's just for your own use, the InDesign plugin indyfont might be the best option. It takes vector designs from InDesign and turns them into fonts very simply. It's popular for making custom bullets, which InDesign can't normally do (the free trial version for 1-character fonts is often used for this). I don't thing there's a full commercial release yet though, so if you're planning to release a full font not just use them here and there in your own work, maybe conventional font software would be better. –  user568458 Apr 18 '13 at 14:47

3 Answers 3

up vote 3 down vote accepted

I recently did this in FontForge, inspired by this article by A List Apart. While you could theoretically put the glyphs anywhere, it's probably preferable to put them into Unicode private use areas, because that way if the font doesn't render you're not stuck with a letter 'a' or whatever.

  • Install FontForge...good luck; that's half the battle. Once you're in and you have a new font file up and running, go to Encoding > Reencode > ISO 10646-1 (Unicode, BMP) to show the private use glyphs. Private Use is U+E000 through U+F8FF.
  • Put in your glyphs. There are different ways to do this; I did them in Illustrator, exported to SVG, and imported. Then, once you have 'em in your space, export as TTF.
  • Use FontSquirrel's Webfont Generator to generate the webfont version. Be careful, though...FontSquirrel's generator will subset the font and cut out the private use glyphs unless you tell it not to. Go into the expert options and select "No subsetting".
  • Set up your CSS font-face as you ordinarily would.
  • Implement! How you implement depends on what you want to do; CSS3 content is a good solution. Use Unicode HTML entities to display your content...U+E000 is \E000 in CSS and  in HTML...use a converter to help. A hex to decimal converter will help with converting to HTML.

Hope this fills in some gaps!

share|improve this answer
1  
I couldn't figure out why my PUA icons were only rendering a rectangle. The FontSquirrel settings was key to getting me through that. thanks! –  hellatan Sep 3 '13 at 19:48

There are a fair amount of options on the market now for building fonts. From your question, it appears that you're after webfonts in particular. Most of the modern tools will create a webfont for you, or you can run a desktop font through FontSquirrel's webfont generator.

My preferred process is paper > Illustrator > FontLab. There's a rather detailed procedure for the last jump there, but it's not hard once you have a template set up.

RoboFont is another professional tool that has emerged in the last few years to dethrone FontLab's dominance. Other popular options on the cheap are FontForge and FontCreator.

Update
I almost forgot IcoMoon: the first custom icon font builder, which allows users to select the icons they need, and make them into a font.

share|improve this answer

IconMoon seems to be the best tool out there (previously mentioned on this thread by plainclothes).

That said, this new PS Icon Web Font Creator plugin seems very promising too as it would allow you to create the fonts directly from Photoshop.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.