Webfonts_BarCampHBG
-
Upload
tobias-treppmann -
Category
Design
-
view
103 -
download
1
description
Transcript of Webfonts_BarCampHBG
![Page 1: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/1.jpg)
TYPOGRAPHERSANONYMOUS
WELCOME TO
Saturday, April 6, 13
![Page 2: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/2.jpg)
THE 12 STEP PROGRAMFOR ICON WEBFONT DESIGNERS
Saturday, April 6, 13
![Page 3: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/3.jpg)
Hello, my name is
TOBIAS& I am a web-fontoholic
@tobystereo
Saturday, April 6, 13
![Page 4: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/4.jpg)
Why webfonts?
Saturday, April 6, 13
![Page 5: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/5.jpg)
That’s it?
Saturday, April 6, 13
![Page 6: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/6.jpg)
NO!
Saturday, April 6, 13
![Page 7: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/7.jpg)
A Ligature of it’s own
“RSS”
good for accessibility & SEOuse with JS-fallback
Saturday, April 6, 13
![Page 8: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/8.jpg)
ASCII Art 2.0
Saturday, April 6, 13
![Page 9: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/9.jpg)
Saturday, April 6, 13
![Page 10: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/10.jpg)
Saturday, April 6, 13
![Page 11: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/11.jpg)
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
![Page 12: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/12.jpg)
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
![Page 13: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/13.jpg)
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
![Page 14: Webfonts_BarCampHBG](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c84ec84a79598b5e8b45be/html5/thumbnails/14.jpg)
Thanks.follow me @tobystereo
Saturday, April 6, 13