Search code examples
glyphiconsfontellosvg-font

Offset when convert SVG to font with Glyphter.com - Offset

I created a simple SVG in Adobe Illustrator and then I save it as a SVG:

I then upload this SVG to glyphter.com and it looks perfectly centered:

I then drop the .svg file generated by the Glyphter download into fontello and I use it in my website but all the ones I generate are offset like this:

Does anyone know why the offset is there? Shouldn't it be cenetered?

I even tried making my SVG graphic save with artboards and i used artboards of height and width the same so its a square.

Solution

  • As mentioned in the comments, you can use FontForge for low-level control of the glyphs in almost any font.

    • FontForge is free: https://fontforge.github.io/en-US/
    • It can be installed on Windows, Mac OS X and GNU+Linux
    • You can manipulate individual glyphs, and perform bulk operations
    • When you're done editing your font, you can export it to almost any font-mime-type (ttf, otf, woff, svg, etc)

    This is a good manual for installing and using FontForge:
    http://designwithfontforge.com/en-US/index.html

    The information you will probably need for this specific issue is here:
    http://designwithfontforge.com/en-US/Spacing_Metrics_and_Kerning.html

    Bulk centering all glyphs:

    • open the font you want to edit
    • to see all the relevant glyphs select Encoding -> Compact from the top menu
    • to select all the glyphs, press Ctrl+A on your keyboard, then
    • to center all the glyphs relatively, select Metrics -> Center in Width from the top-menu.

    The following screen-shots illustrate the last 3 points in sequence - mentioned above:

    enter image description here

    enter image description here

    When you're done, select File -> Generate Fonts from the top-menu and choose the font-type you want, choose the target folder, and hit Save.