Text positioned differently in same browser on (nearly) same OS - css

Question

I'm really stumped here. What I have is a div stylized as a rectangle, containing text which is the main header for the page. Relevant code follows:
HTML:
<div id="rectangle">
<h1>SIN</h1>
</div>
CSS:
h1 {
text-align:right
font-family:Buenard;
font-size:120px;
font-weight:normal;
color:#FFFFFF;
position:absolute;
width:98%;
line-height:109px;
border:1px solid white; /*for debugging purposes*/
}
#rectangle {
position:relative;
width:237px;
height:109px;
background:#6F0000;
margin-top:40px;
}
The problem that is driving me crazy is that I have two different Windows 7 computers, one Home Premium and the other Enterprise, that produce different results for the same version of Chrome (Firefox has the inconsistency as well). On the Enterprise computer, the text is closer to the bottom of the box, and on the Home Premium computer, the text is closer to the top.
I remember reading that browsers like Chrome and Firefox use OS system settings for fonts sometimes, but I can't figure out what could be causing this, nor how to remedy it. I ultimately want the text to be vertically centered and right aligned inside the rectangle, and can pull that off for each of the computers but not both at once.
I believe that the Mac OSX computer I tried this on had the same behavior as the Windows Enterprise computer (but I'm not entirely sure), so this may just be a setting on my personal computer.
I realize I could just use an image to fix this problem (and I may) but I'd really like to know what's going on here.
EDIT: I tried it out on my other computer and the issue still exists. The web font is referenced in the manner stated below. Any other ideas? My inclination is that it is a system settings issue, but I can't find what setting that would be.

Answer 1

It most likely is the font your using as it may not be installed on one of those computers. I would suggest trying a different font-family first.
h1 {
font-family: san-serif;
}
If you want to use that font you will first have to determine if you have the legal right to distribute it and then you would have to have every visitor to your site download and install the font so your site displays properly.
If you want custom fonts I would suggest looking into web-fonts. Google web fonts are just one sample found here: http://www.google.com/fonts/
EDIT:
In addition to making sure, and thanks to #w3d, your font will work, though not the way you have it referenced. You will need to make it a webfont reference so that browsers know to go to the web resource, otherwise the fallback fonts will be used instead.
As per the images you added, the line height might be your issue, try removing it. If you need to elevate that text off its borders, then wrap it with a span and apply some styling.
HTML
<span class="elevate">SIN</span>
CSS
span.elevate {
display: inline-block; /* to allow applying margins and padding */
margin: 2px 0; /* puts 2px worth of margin below and above text */
}