Why did the font when laying out css html turn out to be blurry and different from psd?

Question

css

I typed the Intro font according to the psd design, connected it via @font-face otf, but for some reason the font is blurry in all browsers, help me why and how to fix it?
Screenshot in the application. On the left as it should, on the right as it turned out:

Answer 1

Because browsers render fonts differently.
Try this:
or
Will only work in webkits.

Answer 2

When creating a layout in psd, it is worth doing an approximate anti-aliasing method. Moreover, I am already satisfied for a long time there is a method of smoothing "LCD Windows"

Answer 3

It was the body that I registered and separately the style, without changes, there was an experience of using the same font, everything is displayed normally (Maybe something else I forgot about fonts? What else can interfere with a clear display? Is otf enough?