Making web fonts with Grunt

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