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?
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
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
\E000in 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!
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.
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.