1. WELCOME TO
TYPOGRAPHERS
ANONYMOUS
Saturday, April 6, 13

2. THE 12 STEP PROGRAM
FOR ICON WEBFONT DESIGNERS
Saturday, April 6, 13

3. Hello, my name is
TOBIAS
& I am a web-fontoholic
@tobystereo
Saturday, April 6, 13

4. Why webfonts?
Saturday, April 6, 13

5. That’s it?
Saturday, April 6, 13

6. NO!
Saturday, April 6, 13

7. A Ligature of it’s own
“RSS”
good for accessibility & SEO
use with JS-fallback
Saturday, April 6, 13

8. ASCII Art 2.0
Saturday, April 6, 13

9. Saturday, April 6, 13

10. Saturday, April 6, 13

11. The 12 Steps
1. Create your icons
2. Open Font Template in Inkscape
3. Select Text>SVG Font Editor and set font & font family names
4. In Font Editor, select Glyphs > add Glyph
5. set name “Shape 1” and matching string “a”
6. Create or import shape
Saturday, April 6, 13

12. 7. select “Edit paths by nodes” tool
8. select the shape(s) to add to the character
9. Path > Union & Path > Object to Path
10.SVG Font Editor > Glyphs > select the newly created glyph
and click “Get curves from selection”
11.convert .svg file to .ttf at http://www.freefontconverter.com/
12.convert to a webfont at http://www.fontsquirrel.com/tools/
webfont-generator
Saturday, April 6, 13

13. The new 4 Steps
1. Create icons
2. import icons to http://icomoon.io/app (twice)
3. enable ligatures and assign ligature keyword to icon and
unassigned UTF character for JS fallback
4. Export and use
Saturday, April 6, 13

14. Thanks.
follow me @tobystereo
Saturday, April 6, 13