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