Skip to content

Instantly share code, notes, and snippets.

@alicebartlett
Last active November 10, 2015 10:29
Show Gist options
  • Save alicebartlett/1e785aa6a9baa8876d3f to your computer and use it in GitHub Desktop.
Save alicebartlett/1e785aa6a9baa8876d3f to your computer and use it in GitHub Desktop.
Trying to use fontforge to create an icon font from svgs
  1. Installed fontforge using the instructions on http://fontforge.github.io/en-US/.
  2. Instlalled other dependencies outlined in https://github.com/Financial-Times/o-ft-icons/edit/master/README.md
  3. Fontforge just opens and then immediately crashes again as documented in this bug: fontforge/fontforge#2497
  4. I install font forge from HEAD using this link: http://fuuko.libferris.com/osx/packages/FontForge_latest-HEAD.app.dmg
  5. This seems to work without error
  6. I do obt install
  7. I do grunt
  8. The webfonts task (which uses fontforge) fails with (something like) fontforge is not installed please ensure you have all dependencies installed
  9. I decide to use homebrew instead
  10. I do brew install fontforge which appears to work
  11. I do grunt
  12. grunt hangs on the webfont task
  13. I decide this must be because I've installed the wrong version of fontforge (like in tep 3)
  14. I do brew install fontforge --HEAD
  15. fontforge still hangs
  16. I wonder if it is not set up properly as i didn't install it with the GUI, maybe that's important (?!)
  17. I uninstall everything
  18. I do brew cask install fontforge
  19. I do grunt
  20. It still hangs
  21. I uninstall everything
  22. I decide to compile from source using these instructions: https://github.com/fontforge/fontforge/blob/master/INSTALL-git.md#on-mac-os-x-with-homebrew
  23. The FT network blocks the git:// protocol. It takes me a while to figure this out and switch to a more easy-going network
  24. It STILL hangs.
  25. I uninstall everything
  26. I go back to regular brew install fontforge
  27. I do grunt
  28. I kill the fontforge process
  29. grunt errors with:
  - Warning: Something went wrong when running fontforge. Probably one of your SVGs is too complicated for fontforge.
    - Try to use “node” engine instead of “fontforge”. (See “engine” option in the Readme.)
    - To find “bad” icon try to remove SVGs one by one until error disappears. Then try to simplify this SVG in Sketch, Illustrator, etc.
  1. This is quite a common problem and nobody seems to know what's causing it: sapegin/grunt-webfont#135
  2. I switch to the node engine in the grunt config and it all magically works but the bounding boxes are all way out of the generated icon font
  3. I start deleting and re-adding svgs until I find the broken one its this: https://github.com/Financial-Times/o-ft-icons/blob/master/svg/section-columnists.svg
  4. I modify some bits of the SVG path until it works:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M99.8 39.2l-32.3-8L50 3.2 32.4 31l-32.2 8 21.4 25.4-2.4 33L50 85.4l30.7 12.4-2.3-33L99.8 39zM30 69h-6.4l.3-5.2-5-7c3.4-1.5 6.4-2.2 6.8-2.4.7-.4.8-1 .7-2.5 0-1.2-2.6-2.4-2.6-8.8 0-4.8 1.8-9 6.5-9 2.4 0 6.4 4.2 6.4 9 0 6.3-2.8 7.5-3 8.6 0 1.4 0 2 .7 2.5.5.2 4.7 1 8.6 3 0 .7-.2 1.3-.7 1.5-.6.3-8 3-12.3 7-.2.3-.3 1.2-.3 3.2zm19-27.6c5 0 6.8 4 6.8 8.8 0 6.4-2.5 7.4-2.6 8.5 0 1.4 0 2 .7 2.3 0 0 8 3.6 12.6 7.4 0 0 0 4.5-.3 10.6H32.8s-.7-10.5 0-11.2c4.3-4 11.6-6 12.3-6.2 1-.3 1-1.3.8-2.7 0-1.2-3-2.5-3-9 0-4.7 1.2-8.5 6.2-8.5" fill="#333"/><path d="M75.8 66.5V64l2.2-3.6 2.3-3.5-.7-.4-3.3-1.2c-3.2-1-3.3-1-3.3-2.6 0-1 0-1 .7-2 1.5-2.3 2-4.3 1.8-8 0-1.5 0-2.6-.3-3.2-.6-2.2-1.8-4-3.3-4.6-1.2-.6-2.7-.8-3.5-.6-2 .6-4.3 3.2-5.2 5.8-.4 1.4-.6 2.7-.4 4.5 0 2.6.6 4 2 6.2.5.7.6.8.6 1.8 0 1.2-.2 1.5-1.5 1.8-2 .6-5 1.7-6.3 2.3l-1.4.5.2.5c0 .3.2.6.3.7l2 1c3.8 1.5 8 4 9.8 5.6l1 .8v3H76l-.2-2.5z" fill="#fff"/></svg>
  1. Everything finally works but I have no idea why this SVG is calling trouble. It's not causing trouble for Alberto so we decide to do the thing I was supposed to be doing using his machine instead.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment