Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

Generate Icon Fonts Automatically with FontCustom


Source code with working Rails App example at:

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
  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}

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


  1. Matthew says:

    Great post. I’d add one more notable drawback — scalability. Before we integrated fontcustom into our build process, we used to use icomoon as well. Our application has 6 product designers and 4 UI engineers, all looking to add icons from time to time, often working on different branches with various versions of the icon font. It gets messy. Really quickly. Font files are binary and can’t merge, so we had to create an entirely new process for creating icon fonts when working on our standard product cases. We also had to keep a ton of documentation, including versioning icomoon json history. Moving to fontcustom is a total necessity when working on projects with more than one icon contributor. No more font file troubles, and we can now have revision history of our svg icons themselves. Win win.

  2. Eric C. says:

    Hey Ward, great post. Definitely have been using fontcustom right now and it’s been a huge help.

  3. Ward Penney says:

    Yeah Matthew! I also got into the json-versioning loop with IcoMoon. Thanks for the added point. I added it to the post.

  4. Kristian P. says:

    Hi, I’m having trouble getting the fontcustom to work with different widths, so basically I want a square 16×16 box and then I want a rectangle 32×16 as in the same height, but the outcome is that the rectangle gets resized to the same width as the square and the outcome is wrong. You specifically mention that it should work with different widths, with the last update they included a f.autoWidth(0, 0, 512) feature, but didn’t have any success playing with the numbers in the file. Really appreciate the answer. Thanks in advance.

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *