FLUID-5555: Consider using github and grunt to simplify design, development, and deployment of icon fonts

Description

Currently in Fluid / Floe related projects, we are using an ad-hoc system to generate fonts: whenever a project needs a font, an existing icon font is duplicated, or another icon font is created from scratch. This creates a problem where icons are hard to maintain.

A possible solution (open for discussion and refinement):

• create a font project in github to store the SVG vectors used for font icons
• SVG files are not binary, so they can be versioned easily by github and still editable by vector editors
• use a grunt plugin capable of generating fonts from an arbitrary list of SVGs
• have an index file / contact sheet which shows all available icons.

There are some questions to address:

• How is it possible to maintain a font set for a particular project? i.e. Project A may use 10 of 20 fonts, whereas Project B may use 12 of 20. How is this information stored?
• How are Unicode PUA's specified for each glyph / SVG? Are PUA's globally unique in the font repository, or do projects define their own PUA's?
• If someone deletes an SVG from the repository, do the PUAs change automatically?
• Can Readme documentation be automatically generated for each font set? The readme would contain instructions on how to use the icon font in CSS/HTML, and list the PUA codes for each glyph.

Comments

• Justin Obara commented 2016-02-19T08:12:50.537-0500

  @@Jonathan Hung pointed me at https://github.com/sapegin/grunt-webfont. It should address at least some of the above concerns as you can specify which glyph uses which PUA value.

• Justin Obara commented 2016-02-19T09:11:56.112-0500

  Grunt does support pulling data from an external JSON file (http://gruntjs.com/configuring-tasks#importing-external-data), so we could have JSON files for each project that uses the icons. However it might be easier to just source all this information via the command line, similar to how the Infusion build script currently work.

• Justin Obara commented 2017-03-14T12:52:46.260-0400

  A short blog post about how to use grunt-webfont including information about font height, ascent and descent. https://medium.com/sketch-app-sources/font-icons-workflow-with-sketch-and-grunt-16b161d97c5e#.tqibe05z5

• Justin Obara commented 2017-03-16T09:09:31.502-0400

  I had trouble getting good looking fonts using https://github.com/sapegin/grunt-webfont without installing fontforge. Unfortunately fontforge isn't installed via NPM which would pose a problem for using in Infusion. I did have more success with https://www.npmjs.com/package/webfonts-generator; however, it is a straight NPM package ( not grunt ) and needed to set the fontHeight option. It appears that both grunt-webfont and webfont-generator use https://github.com/nfroidure/svgicons2svgfont as the node engine, so perhaps tweaking the settings for grunt-webfont would get it to work.

  We may also need to rebuild our svgs for the icons. For example use consistent art board sizes for all of them.

• Eloisa Guerrero commented 2017-10-19T16:13:16.843-0400

  Documentation for standardising workflow for icon fonts over here: https://wiki.fluidproject.org/display/fluid/Standard+workflow+in+maintaining+and+creating+icon+fonts

• Eloisa Guerrero commented 2017-10-19T16:17:57.329-0400

  See wiki documentation: https://issues.fluidproject.org/browse/FLUID-5555

  And infusion-icons Github repository: https://github.com/fluid-project/infusion-icons