2

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.

Noitidart
  • 35,443
  • 37
  • 154
  • 323
  • 1
    Do you have to use **Glyphter** & **Fontello** exclusively? I can give you a great answer on how to fix the issue pronto, but with FontForge. –  May 10 '16 at 05:31
  • Thanks @argon - I only have access to free open source tools :( I would gladly accept your answer though as I would learn from it and try to use FontForge as I am stuck on this :( – Noitidart May 10 '16 at 07:50
  • 1
    No sweat, it's free and open-source. I've posted an answer as discussed. If you need more info I'll gladly update the answer with more specific instructions :) –  May 10 '16 at 08:58

1 Answers1

3

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.