Mysteriously Bold Font CSS3 - html

Question

I am using a webfont (poly) on my page on several buttons. In firefox, everything appears right, but in Chrome the first button's font seems bolder than the others despite using the same CSS3 code (unless I'm missing a typo).
http://ashgavs.cloudant.com/site/_design/AshGavsCouch/betcha/index.html
thats the page, look at Login vs. Login with facebook or Sign up. It's not the length of the text that's affecting the font weight, tested that already.
here's the CSS for the first and second buttons:
#login{
position: absolute;
top: 137px;
left: 19px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #aff797;
background: #369942;
background: -webkit-gradient(linear, left top, left bottom, from(#27ca3d), to(#369942));
background: -webkit-linear-gradient(top, #27ca3d, #369942);
background: -moz-linear-gradient(top, #27ca3d, #369942);
background: -ms-linear-gradient(top, #27ca3d, #369942);
background: -o-linear-gradient(top, #27ca3d, #369942);
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
box-shadow: rgba(0,0,0,.7) 0 1px 0;
text-shadow: 0 1px 0 #91d99a;
color: #0e5817;
font-size: 24px;
font-family: 'Poly', serif;
text-decoration: none;
vertical-align: center;
width: 229px;
}
#loginFB{
position: absolute;
top: 196px;
left: 19px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #65a9d7;
background: #3e779d;
background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
background: -moz-linear-gradient(top, #65a9d7, #3e779d);
background: -ms-linear-gradient(top, #65a9d7, #3e779d);
background: -o-linear-gradient(top, #65a9d7, #3e779d);
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 5px;
-webkit-box-shadow: rgba(0,0,0,.7) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,.7) 0 1px 0;
box-shadow: rgba(0,0,0,.7) 0 1px 0;
text-shadow: 0 1px 0 #7ca9c7;
color: #0e3458;
font-size: 24px;
font-family: 'Poly', serif;
text-decoration: none;
vertical-align: center;
width: 229px;
}
Both buttons inherit properties from the same divs, so that can't be the issue either. Thanks.
--Ashley

Answer 1

It may be with your particular browser. Regardless, a very good thing to do (pretty much a requirement these days) is to add a CSS Reset before your own CSS definitions. Just Google "CSS Reset". You will see a lot of results. Basically it removes browser specific formatting so that your CSS is the only effective formatting on the page. No unexpected changes or additions from the browser. Often doing this will solve the kinds of issues you describe. You might want to research the idiosyncrasies of your browser, but to save time just try the reset first.