Menu
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:
498
If the Bold indicator is "turned on" in your dialog box, then your text is going to appear as bold because that's the way that the style is defined. If this is the case, then you can click the Bold indicator (to turn it off) and then click OK. Your problem should be solved.
The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag.
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!
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
