Web fonts FTW

Click here to load reader

  • date post

    14-Apr-2017
  • Category

    Software

  • view

    46
  • download

    0

Embed Size (px)

Transcript of Web fonts FTW

  • 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