title: Font looks different on photoshop and at website
body: <p>Simple question: Why this 2 fonts looks different at photoshop and at website.
  <img src="https://i.stack.imgur.com/rnI7S.png" alt=""></p>
  
  <p>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). </p>
  
  <p>Here css code:</p>
  
  <pre><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;
  
   }
  </code></pre>
  
  <p>And html code.</p>
  
  <pre><code>  &lt;section id="Section1"&gt;  { mywebsite.NET } &lt;/section&gt;
    &lt;img src="mojeportfolio.png" /&gt;
  </code></pre>
  
  <p>any ideas? Greetings!</p>
  
  <p>MORE</p>
  
  <p>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?</p>