Web Fonts FTW

Making web fonts with Grunt

Transcript

1. Web fonts FTW Making web fonts with Grunt
2. How can we display icons in HTML? • Individual images (e.g. 16x16 .gif) • Spritesheets • Web fonts
3. How can we display icons in HTML? • Individual images (e.g. 16x16 .gif) • Spritesheets • Web fonts
4. Can I use web fonts?
5. Yes.
6. Why a font?
7. Web fonts are: • Vector based • Single file contains multiple icons (aka Spritesheet)
8. Why Vector?
10. One image!
11. Bonus bits • Change size • Change colour • Add drop shadows • and much, much more
12. Why Spritesheet?
13. Spritesheets: • Minimise the number of HTTP Requests • Reduces the overhead/payload ratio • Faster page loads
14. Fonts vs. Images Or, the problem with creating Fonts
15. #killmenow
16. Fonts • [Manual] creation and maintenance is a skilled process • Requires specialist software • Integration with HTML requires management of unicode character assignment(s)
17. Automation FTW
19. How it works for ActiveTeach • Directory of individual SVG icons • Grunt build process with grunt-webfont and grunt-sass tasks • Grunt task generates .eot, .ttf, .woff, .svg and .sass files • Insert HTML tags to display icons
20. Source files • Designer provides SVG shapes exported from illustrator
21. Grunt-webfont task • Includes all SVG files in specified directory • Generates .eot, .ttf, .woff .svg and .sass files
22. Output - Demo page
23. Output - SASS
24. Integration • Universal task - works on all Platforms • Part of our CI Build Process • Generated SASS files are @imported to the overall project SASS file • Used alongside Font Awesome, and is only responsible for our custom icons