font looks different while coding. how to fix it? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

I designed a page in photo shop.

When I try to convert it to HTML the header font looks a bit different. But I applied the same styles and font, for example size is 36pt in Photo shop(non bold), I could get the same effect while I add BOLD when I coding in HTML.

The main problem is that, the font looks like cut letters, meaning the " I " looks like two dashes vertically arranged.

How to solve this?

Answer 1

Save that "page" as an image and then put that image into an HTML file.

EDIT: I think you can just use the PRINT key on your keyboard to make it really look like on your computer - even with all the Photoshop toolbars and such! But don't forget to provide the users with the color profile and illumination profile of your monitor and an exact layout of your room, and don't forget the type of light bulb you are using, the thickness and tinting of the glass in your windows and of course the angle of the sun!

Answer 2

The problem with converting photoshop files to a website is that Photoshop renders fonts different then browsers. In most of the cases, fonts are displayed the same as in your design, but sometimes you just can't get the fonts look exactly the same as in your photoshop file. Unfortunately, there isn't a fix for this yet.

Photoshop simply has a lot more font functionalities then browsers so you'll have to be satisfied with the simplified version in your browser.

What you can do is slice the text from the PSD as an image and include that in your HTML, but that is a very outdated method which will increase the loading time of your website.