Creating Icon Fonts for the Web

Learn how to create your custom icon font quickly and easily from existing icons or your own hand-drawn artwork, using tools like Illustrator, Fontello, Glyphs Mini, and more.

Welcome

• Introduction
• How to use the exercise files

1. Icon Font Overview

• What is an icon font?
• Options for creating icon fonts
• Understanding font metrics
• Tools overview

2. Using Online Tools

• Online font-creation tools
• Choosing existing icons
• Uploading custom icons
• Ensuring consistent sizing
• Choosing Unicode encoding
• Setting font preferences
• Downloading and testing custom icon fonts

3. Drawing Glyphs

• Exploring the finished font
• Determining units per em (UPM)
• Setting up your workspace
• Setting grids and guides
• Drawing on a grid
• Tips for drawing curves
• Drawing consistent curves
• Creating compound paths
• Simplifying paths
• Exporting glyphs

4. Creating Your Own Icon Font

• Glyphs Mini overview
• Creating a new font
• Setting font info
• Organizing glyphs
• Adding new glyphs
• Setting glyph properties
• Importing SVG artwork
• Importing Illustrator artwork
• Controlling path orientation
• Adding extrema points
• Simplifying paths
• Dealing with problem artwork
• Renaming glyphs
• Exporting fonts

5. Generating Web Fonts

• Using Font Squirrel to generate fonts
• Exploring generated files
• Testing icon fonts

Conclusion

• Additional resources