Transcript
TYPOGRAPHERSANONYMOUS
WELCOME TO
Saturday, April 6, 13
THE 12 STEP PROGRAMFOR ICON WEBFONT DESIGNERS
Saturday, April 6, 13
Hello, my name is
TOBIAS& I am a web-fontoholic
@tobystereo
Saturday, April 6, 13
Why webfonts?
Saturday, April 6, 13
That’s it?
Saturday, April 6, 13
NO!
Saturday, April 6, 13
A Ligature of it’s own
“RSS”
good for accessibility & SEOuse with JS-fallback
Saturday, April 6, 13
ASCII Art 2.0
Saturday, April 6, 13
Saturday, April 6, 13
Saturday, April 6, 13
The 12 Steps1. 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
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
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
Thanks.follow me @tobystereo
Saturday, April 6, 13