labs sass

Generate Icon Fonts Automatically with FontCustom

TL;DR

Source code with working Rails App example at:

https://github.com/wardpenney/pivotal-blog-example-fontcustom

Generate Icon Fonts Automatically

Fonts are a fantastic way to create scalable vector graphics for your website. Up until now, I regularly used the IcoMoon App (by keyamoon) for converting individual SVGs into a usable web font. However, I always wanted something that would generate icon fonts automatically. The web font generators have a few notable drawbacks:

  • There are several manual steps to cut a new version of the font,

  • the font hinting quality varies and is hard to quickly iterate on, and

  • the git commits for font changes aren’t very self-documenting.

  • When your team has lots of devs (or pairs) the JSON versioning process with icomoon is a real pain and not scalable

So, we decided to try FontCustom, a command-line utility that uses fontforge and ttfautohint to compile fonts directly from a folder of SVG’s. Think of it like Compass’ spriting. So, here’s what you do:

  1. brew install fontforge ttfautohint

  2. Create a collection of super-cute SVG graphics (see gotchas below)

  3. Put your source glyphs in a folder not exposed with asset pipeline (I use lib/font-glyphs)
  4. Create your font custom config file in that same folder. In the file, choose your new font name and the css prefix.
  5. Set up the nifty rake task
  6. Add a SASS import in your main sass file to import your new font. `@import components/fontcustom`
  7. Include the @font-face sass file (check out https://blog.pivotal.io/bulletproof-font-face-syntax-with-sass/)
  8. Make a fonts folder: `app/assets/fonts/`

  9. Compile your font! `$ rake glyphs:compile`

SVG Gotchas Exporting from Illustrator

  • Use the SVG Tiny 1.1+ format (you can do gradients!) (see screenshot)

  • Uncheck the “Include Slicing Data”. FontCustom will error with this checked.

  • You can only use Fills, no Strokes.

  • In testing at home, I am pretty sure a dependency does not work on Snow Leopard.

  • IMPORTANT: All of your glyphs should be the same height. There’s a long explanation for this, but they should vary in width, not height (unless you intend that, but I bet you don’t). This of it like the letters “w” and “o” in a non-monospaced typeface. The “w” is wider than the “o”, but not taller. You want them all to line up the same as a normal typeface.
Illustrator CC settings for SVG export to generate icon fonts automatically with FontCustom

Illustrator CC settings for SVG export to work with FontCustom

Including with Asset Pipeline

FontCustom does have some configuration options, but it can be tricky to make it a “one command” integration with Rails. So, I created a rake task to do what is needed to get the fonts over to app/assets/fonts. This task moves the fonts over, moves the CSS over (for the individual icon classes) and removes an erroneous @font-face declaration. I use the Asset Pipeline SASS directives for the font loading (see my pervious post ). Here is the rake task:

 


namespace :glyphs do
  task :compile do
    puts "Remove existing glyph file"
    %x{rm app/assets/stylesheets/components/_fontcustom.scss}

    puts "Compiling glyphs lib/font-glyphs/*.SVG"
    %x(fontcustom compile lib/font-glyphs/)

    puts "Copying new fonts to app/assets/fonts"
    %x(cp -f lib/font-glyphs/fonts/examplecon.* app/assets/fonts)

    puts "Copying SCSS glyph declarations file to app/assets/stylesheets/components/_fontcustom.scss"
    %x{cp -f lib/font-glyphs/fonts/_fontcustom.scss app/assets/stylesheets/components/_fontcustom.scss}

    puts "Removing @font-face lines from app/assets/stylesheets/components/_fontcustom.scss"
    %x{sed -i.bak '5,14d' app/assets/stylesheets/components/_fontcustom.scss}
    %x{rm app/assets/stylesheets/components/_fontcustom.scss.bak}
  end
end

Thanks a lot for reading! And please follow me on Twitter for both sensical and non related frontend ramblings.

Ward

Related Articles