Save 37% off PRO during our Black Friday Sale! »

Web Fonts FTW

50bd52fe63e2264aeae49b33d0e9102e?s=47 James Ford
February 05, 2015

Web Fonts FTW

Making web fonts with Grunt

50bd52fe63e2264aeae49b33d0e9102e?s=128

James Ford

February 05, 2015
Tweet

Transcript

  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?

  9. None
  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

  18. None
  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
  25. None