Web fonts FTWMaking web fonts with Grunt

How can we display icons in HTML?

Individual images (e.g. 16x16 .gif) Spritesheets Web fonts

How can we display icons in HTML?

Individual images (e.g. 16x16 .gif) Spritesheets Web fonts

Can I use web fonts?

Yes.

Why a font?

Web fonts are:

Vector based Single file contains multiple icons

(aka Spritesheet)

Why Vector?

One image!

Bonus bits

Change size Change colour Add drop shadows and much, much more

Why Spritesheet?

Spritesheets:

Minimise the number of HTTP Requests Reduces the overhead/payload ratio Faster page loads

Fonts vs. ImagesOr, the problem with creating Fonts

#killmenow

Fonts

[Manual] creation and maintenance is a skilled process

Requires specialist software Integration with HTML requires management

of unicode character assignment(s)

Automation FTW

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

Source files

Designer provides SVG shapes exported from illustrator

Grunt-webfont task

Includes all SVG files in specified directory

Generates .eot, .ttf, .woff .svg and .sass files

Output - Demo page

Output - SASS

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