Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WELCOME TO                        TYPOGRAPHERS                            ANONYMOUSSaturday, April 6, 13
THE 12 STEP PROGRAM                            FOR ICON WEBFONT DESIGNERSSaturday, April 6, 13
Hello, my name is                        TOBIAS                        & I am a web-fontoholic                            ...
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 & SEO...
ASCII Art 2.0Saturday, April 6, 13
Saturday, April 6, 13
Saturday, April 6, 13
The 12 Steps                        1. Create your icons                        2. Open Font Template in Inkscape         ...
7. select “Edit paths by nodes” tool                        8. select the shape(s) to add to the character                ...
The new 4 Steps                        1. Create icons                        2. import icons to http://icomoon.io/app (tw...
Thanks.                        follow me @tobystereoSaturday, April 6, 13
Upcoming SlideShare
Loading in …5
×

Webfonts_BarCampHBG

2,042 views

Published on

Published in: Design
  • Login to see the comments

  • Be the first to like this

Webfonts_BarCampHBG

  1. 1. WELCOME TO TYPOGRAPHERS ANONYMOUSSaturday, April 6, 13
  2. 2. THE 12 STEP PROGRAM FOR ICON WEBFONT DESIGNERSSaturday, April 6, 13
  3. 3. Hello, my name is TOBIAS & I am a web-fontoholic @tobystereoSaturday, April 6, 13
  4. 4. Why webfonts?Saturday, April 6, 13
  5. 5. That’s it?Saturday, April 6, 13
  6. 6. NO!Saturday, April 6, 13
  7. 7. A Ligature of it’s own “RSS” good for accessibility & SEO use with JS-fallbackSaturday, April 6, 13
  8. 8. ASCII Art 2.0Saturday, April 6, 13
  9. 9. Saturday, April 6, 13
  10. 10. Saturday, April 6, 13
  11. 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 shapeSaturday, April 6, 13
  12. 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-generatorSaturday, April 6, 13
  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 useSaturday, April 6, 13
  14. 14. Thanks. follow me @tobystereoSaturday, April 6, 13

×