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

Question

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.

Answer 1

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:

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.