Custom font is changed in browser - css

Question

After a long search for the right font, I decided to create my own. I based it off a photoshop Arial font that was alised (pixelated = anti-aliassed:none).
Here is the photoshop rendition of the font
After, I created a font using FontStruct with the exact same pixel configuration it would show up in photoshop with each individual letter. I created the font, tested it in photoshop and it worked beautifully in photoshop. It would appear exactly the same. BUT then I added it to my website to be used and for some reason the browser shrunk the font horizontally.
Why did it shrink horizontally? My font size is 8px and at 8px it should show perfectly, but instead is is horizontally squeezed. Any thoughts? Thanks
The font is linked with css
#font-face {
font-family: 'Arial Pixel';
src: url('ArialPixel.ttf');
}
and it is shown through h1 tag
h1 {
text-align : center;
color : #FFF;
font : 8px 'Arial Pixel'; }
Font is here

Answer 1

You'll need to convert the .ttf file here http://www.fontsquirrel.com/tools/webfont-generator
From here you'll need to upload the font files (referenced below) to your server. Absolute URLs won't work with web fonts so keep it local
Use the following code
CSS
<style type="text/css">
#font-face {
font-family: 'arial_pixelregular';
src: url('arialpixel-webfont.eot');
src: url('arialpixel-webfont.eot?#iefix') format('embedded-opentype'),
url('arialpixel-webfont.woff2') format('woff2'),
url('arialpixel-webfont.woff') format('woff'),
url('arialpixel-webfont.ttf') format('truetype'),
url('arialpixel-webfont.svg#arial_pixelregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'arial_pixelregular';
font-weight: normal;
}
</style>
HTML
<h1>ABC</h1>