This document discusses using web fonts to display icons on websites. It explains that web fonts allow embedding multiple icons into a single file, making them vector-based and allowing icons to be resized and recolored. The document outlines how Grunt tasks can be used to automate the process of converting SVG icon files into web font files and integrating them into a website with CSS. Individual SVG icons are input by a designer and Grunt generates and links the web font files so the icons can be inserted into HTML.

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