Wierd font appearance in any browser

Question

Have a good day guys, I attached 2 screenshots (from photoshop and from google chrome) - what's happening to font characters? Font size is the same as in psd, I also did css reset (Meyer Reset, looked even wierder before that) - what could probably be wrong? Can you help me make it look the same as in photoshop?

Thanks in advance.

https://www.dropbox.com/s/zdg3k6a3rd49ygv/Desktop%2028-08-2013%2019-03-08-628.png https://www.dropbox.com/s/kszj0n1ql1jkfv7/Desktop%2028-08-2013%2019-03-15-829.png

here is the code:

article {
font-family: 'CaviarDreams', Arial, sans-serif;
font-size: 17px;
color: #ffffff;
font-style: normal;
}

and the Meyer Reset: css-tricks dot com/snippets/css/meyer-reset/

Answer 1

What size is the font when you check it in the PSD and what size are you using for the font when you style in for the browser.

The font in Photoshop will probably have been drawn with Anti-aliasing and other smoothing effects. There's not really any way to control this as a web developer across all browsers.

Chrome has a CS3 tag that you can try

-webkit-font-smoothing: antialiased;