Province glyph/font sizes not lining up - Interactive map of South Africa

Question

I need to build an interactive map of South Africa so that when someone clicks on the provinces the right Google Map displays. I eventually opted to convert a vector based map of South African provinces I have to fonts/glyphs. This worked super well and you can view them here.

http://vane.co.za/files/south-african-province-glyphs/demo.html

EDIT: I've added a jsFiddle here for the map

The map is one whole map of South Africa with its different provinces so what I did was take each province from within illustrator and copy them into a new document. I then clipped the white board to fit exactly around the edges ensuring that every SVG file I saved was exact.

I saved every file as an SVG and imported it to IcoMoon which then converted it to a font for me. So far so good.

I would assume that that when I import these fonts without a font size, they should all render in their original size so that I can piece together the different province maps into one whole South african map but this is not the case.

I thought that giving them an equal EM sizes will scale them proportionally so that each one is it's own correct size but this has not worked either.

Is there a way to match these maps up so that they all fit perfectly back to the country map again?

I hope this makes sense?

EDIT:

I've gone back to http://icomoon.io where I generated the glyphs and figured out that they are being created at 16px X 16px. However, even if I scale them by px according to the size I want them, they still do not slot into one another correctly.

In Firebug I am nulling all the font sizes and using the layout inspector. These are all the width sizes I managed to get; the heights are all 16px.

North-West     - 22px 
Limpopo        - 24
Mpumalanga     - 15px
KwaZulu-Natal  - 13px
Gauteng        - 15px
Free-State     - 19px
Eastern-Cape   - 24px
Western-Cape   - 20px
Northern-Cape  - 15px

The example below is my attempt at scaling the glyphs up manually but the smaller provinces can be seen in the top left.

EDIT: These are the actual sizes they need to be in order for them to puzzle together nicely inside that white block:

North-West     - 75.684px
Limpopo        - 73.217px
Mpumalanga     - 50.286px
KwaZulu-Natal  - 53.248px
Gauteng        - 25.817px
Free-State     - 72.984px
Eastern-Cape   - 99.397px
Western-Cape   - 84.725px
Northern-Cape  - 120.514px

Answer 1

You clipped the art boards of each shape to match the shape itself. This means you lose all relative sizing between the shapes once you turn them into a font glyph. A tiny little province will be as tall as the largest one if you render your glyphs in the same font-size.

The easiest solution is to not clip artboard the shapes. That way you preserve the scale of each glyph:

Smaller provinces will have a lot of empty space inside the glyph, but they'll all overlap nicely.