Font looks different on photoshop and at website

9
votes

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

At this picture - this first text is from html code, second is an image from photoshop. The same font, the same size - 30. But this first looks more "bold" than second. Why? I want to have a identically font as it is at photoshop (second picture).

Here css code:

@font-face {
font-family: "SegoeWP";
src: url("fonts/play/SegoeWP.eot");
src: url("fonts/play/SegoeWP.eot?#iefix")
         format("embedded-opentype"),
     url("fonts/play/SegoeWP.woff") format("woff"),
     url("fonts/play/SegoeWP.ttf") format("truetype"),
     url("fonts/play/SegoeWP.svg#PlayRegular") format("svg");
font-weight: lighter;
}

#strona {
  width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

#Section1 
{
      font-family: "SegoeWP", Tahoma, Arial, sans-serif;
      font-size: 30px; 
}



header, footer, article, section, hgroup, nav, figure {
    display: block;
}


 body {
  font-family: "SegoeWP", Tahoma, Arial, sans-serif;
  background-image:url('background.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  color: #ffffff;

 }

And html code.

  <section id="Section1">  { mywebsite.NET } </section>
  <img src="mojeportfolio.png" />

any ideas? Greetings!

MORE

i found, that I have 3 types of SegoeWP font in folder. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" looks a litle bit too "bold", but this "SegoeWP-Light" is perfect and looks identical as in photoshop when i doubleclick it. How can I use it on my website? When I change this part -> url("fonts/play/SegoeWP-Light.*"), nothing change at website. What is wrong?

3
htmlcssfontsphotoshop
You're specifying several font file types, how do you know which one is being used? Perhaps they don't match. – Diodeus - James MacFarlane
there is only SegoeWP.ttf at the moment – whoah
@whoah Maybe you are not seeing the picture in actual size in photoshop.. They can't be different.. when the size is 30px, IT SHOULD BE 30px EVERYWHERE.. Try pressing ctrl+0 in ps.. to see in actual size.. – Miro Markaravanes
@Miro Markarian -> it is 30px. I tested on photoshop, and this font is "Light". "Semibold" and "regular" looks similar at this on website. How can I use "Light" option on website? font-weight: lighter; change nothing :( – whoah
i found, that I have 3 types of SegoeWP font in folder. "SegoeWP", "SegoeWP-Light", "SegoeWP-Semibold". "SegoeWP" looks a litle bit too "bold", but this "SegoeWP-Light" is perfect and looks identical as in photoshop when i doubleclick it. How can I use it on my website? When I change this part -> url("fonts/play/SegoeWP-Light.*"), nothing change at website. What is wrong? – whoah

3 Answers

5
votes

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

5
votes

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.

-2
votes

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