Why does my font-face text look so bold?
Here is an image from the Photoshop design of the webpage:
And the webpage with the same size, weight etc:
As you can see, the text renders much thicker on the web render, to the point where it looks almost like a different font entirely.
Here is the @font-face code accompanying the text:
@font-face {
font-family: "PT Sans";
src: url('fonts/151428223-PTS55F.eot');
src: url('fonts/151428223-PTS55F.eot?#iefix') format('embedded-opentype'),
url('fonts/151428223-PTS55F.svg#PT Sans') format('svg'),
url('fonts/151428223-PTS55F.woff') format('woff'),
url('fonts/151428223-PTS55F.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
...and, for reference, the settings for the text in Photoshop:
Answer
You are using the PT Sans font in Photoshop then you have already installed the font on your PC. You can try to remove the @font-face code and load the installed PT Sans font from your PC which is the same font file you're using in Photoshop to check if the issue is happening because of using the @font-face code or @font-face format files. (e.g. without @font-face and no extra css)
<head>
<style>
body {
font-family: "PT Sans";
font-weight: normal;
font-style: normal;
font-size: 28px;
color: #454545;
text-align: center;
}
</style>
</head>
<body>
<p>SOME FINE LOOKING TEXT <b>RIGHT HERE</b></p>
</body>
You can also try PT Sans from Google Fonts.
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
(Copy the above code as the first element in the <head> of your HTML document.)
As for -webkit-font-smoothing I don't think it makes any major difference, but you can read a good article about it.
Beefing Up Dull Text in WebKit - by Chris Coyier.
I have Photoshop CC (2014) and I've downloaded and installed the PT Sans from Google Fonts and I've tested the issue myself by using the above HTML code and this is the results:
1 - Your image and 2 - My Photoshop CC 2014 (Anti-aliasing Smooth)
As you can see above text rendered differently across browsers and anti-aliasing in Photoshop and If that's the same results you have and it looks almost like a different font entirely to you then My Point is:
Windows, Linux, OS X and Mobile devices each (may) have different text-rendering engines. Not to mention that different browsers each have their own text rendering defaults, so there is no guarantee that your font rendering will be displayed as intended on the user’s system. - by CSS-Tricks text-rendering
BTW It looks fine to me... :)
For more information:
A Closer Look At Font Rendering - by Tim Ahrens
GOOD LUCK!