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?
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
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