Search code examples
fontssvgtruetypeinkscapefontforge

Creating icon fonts with vector software (i.e. inkscape) and fontforge?

Through getting some answers here and some research, I've come across a new approach to implementing icons. Rather than as images or css background, it seems you can approach icons as a font.

Will this method ultimately mean creating a one file font set that has each icon assigned to a character? Because this method is so new to me I really want to sure I approach it correctly first (I see great potential... so much better than creating different icons, exporting each as it's own .png file for every different color and size).

If that's the case, it'll take a bit of memorization (especially since I have over 26 icons). For those more experienced with fontforge, is there a way to say a specific word = character?

Also, in regards to implementing this on the website. I would then need to specify the font type within the css class/id (i.e. font=icons; ). And then I could change the size, color, etc. with css as well? Man, if this really is true. I wish I found out earlier... hours and hours could have been saved.

Anyway, any help with this is greatly appreciated. I'm about to get fontforge and start learning (if there's better free software for font creation, let me know). Hopefully this works out.

Solution

  • I've successfully created a few icon fonts for my websites and the Inkscape FontForge approach as outlined in this how-to is pretty solid, and if you're used to using software such as Inkscape, it's also pretty easy too. Here's the steps I take:

    Preparation (using Inkscape in this example)

    1. Open the Inkscape document that holds your designs.
    2. Make sure you've converted all shapes, type and lines to paths and check your drawing in outline mode to be sure. If there are problems, you can always refer back to this base file to make initial changes to the shapes.
    3. Create a new document by selecting New > fontforge_glyph.
    4. Paste an icon from your design into the new document.
    5. Resize the icon to fit the space provided (although it may be best you resize all icons in the original design document first - up to you).
    6. Centre the icon on the page using the Align tool (if appropriate).
    7. Save the drawing as a plain SVG (it's easier if you title according to the letter to be assigned eg. "j.svg").
    8. Repeat for other icons.

    I'll often leave this plain SVG document open, pasting in new icons and centering and sizing according to the last. This way there is size and position consistency across the icon set (and you don't have to keep choosing the directory to save your plain SVGs).

    Glyph creation (using FontForge)

    1. Once you've made an SVG file for each icon, open FontForge and create a new FontForge document.
    2. In the main glyph display list window, double-click one of the letters/numbers you have an icon for.
    3. In this new glyph window, choose File > Import and select one of your SVG files (you'll probably need to change the file filter in the file dialogue to show SVG files).
    4. If the import registers errors and the wireframe looks like its suffered a mild explosion, you'll need to go back to Inkscape to sort out the path. There's an easy way to find out the problem that should work in most cases:
    * In Inkscape, remove the fill of the icon.
* Add a thin stroke (1px will do).
* Convert the stroke to a path.
* The resulting shape will probably be missing a part of your icon.
* Undo all, then break icon apart and redraw/trace/correct the problem area.

    Font creation (using FontForge)

    1. Back in FontForge, once you've added all of your icons, you need to give your typeface a name. In the main window, select Element > Font info.
    2. Change the following:
    * **Fontname**: MyFontMedium
* **Family name**: My Font
* **Name for humans**: My Font Medium
* **Weight**: Book (Win XP thinks medium = bold, so best to use Book)
    1. In the main window, choose File > Generate Fonts and save to TrueType (ignoring any errors).

    Font validation/conversion

    1. Go to www.fontsquirrel.com/tools/webfont-generator or a similar service to upload your TTF file and get it converted (and corrected)
    2. The zip file you download will contain precise instructions on how to implement the fonts into your web project.

    Hope that's of help.