Font looks different on photoshop and at website

Question

Simple question: Why this 2 fonts looks different at photoshop and at website.

At this picture - this firs

Answer 1

Make sure you are adding the css to the right location sometimes that could be the issue. For full notes on how to lessen the weight of a font you can find it here:

http://www.w3schools.com/css/tryit.asp?filename=trycss_font-weight

Answer 2

photoshop handles fonts a lot differently than a web browser ... because photoshop used functions like smoothing, kernel and others the font will almost always look different in a browser

Answer 3

To get the same result try using font-smoothing: antialiased, and reducing the font size so it matches your Photoshop image.

The biggest difference is because Adobe Photoshop will not do subpixel font-smoothing—unlike most browsers. In your example image this is easily visible if you zoom in(see the color shifts around the edges). Windows has a history of using an extra crisp form of subpixel font rendering, which exacerbates the problem as the perceived font weight can change severely.

Smashing Magazine has an excellent article on font rendering.