Fonts Look Horrible

[The Little Guy]

Why does the web render fonts so much worse that photoshop? Is there a way to optimize a font for the web?

[xyph]

Force everyone to use OSX?

 

Expecting a browser to render fonts like a design application is just silly I believe most just piggy-back on the OS' rendering engine.

 

Use images, static or dynamic, if you need fonts to render in a certain way.

[The Little Guy]

I am mostly just venting in my first post, but if you think about it how can a browser render a font like verdana, arial, times, etc. fine, but if you use some custom font the browser becomes completely lost and can't render it nicely... In my opinion, you would thing that it could do it just fine since it renders the font the same way it renders a font like my previous examples.

[Jessica]

If the font is installed on your computer, the browser can use it. This is the reason you're supposed to use a list, IE:

font-family: Georgia, Garamond, Times New Roman, serif;

So the computer can use the most likely font. If your computer has Georgia, it's used. If not, it tries Garamond, then TNR, then just a generic serif. So if you're downloading wacky fonts online, and your visitors don't have them, you need to specify other similar fonts they are likely to have.

 

There are lots of solutions out there for using specific fonts without images. I specifically see them in Wordpress sites a lot.

 

TLDR: the problem is not the web browser, the problem is using fonts the visitors don't have.

Edited October 8, 2012 by Jessica

[The Little Guy]

Sorry, but I think you're misunderstanding.

 

@font-face{
   font-family: henry;
   src: url('/media/fonts/HenryMorganHand.ttf'); /* IE9+ */
}

h1{
   font-family: henry, verdana, arial, serif, times;
}

 

The font is downloaded and used by supported browsers. I am just wondering why it can't render it as nicely as it can render installed fonts.

[Jessica]

Maybe if you actually wanted answers, you should have provided the relevant information in your first post?

 

Perhaps the size you've set it to isn't optimal for that font.

 

Photoshop usually adds aliasing to the fonts, something I personally think makes them LESS attractive.

[Adam]

You should be using proper web fonts, TrueType fonts are not built for web browsers.

[The Little Guy]

What are proper web fonts?

[ManiacDan]

Web-safe fonts is a popular discussion topic. There's a comprehensive-looking list here, and sitepoint has a whole article about it.

 

That font you used as an example is horribly kerned. Stick to normal fonts, or make images if you really need something to look like a signature or whatever.

[kicken]

Looks the same to me regardless of if the font is downloaded or already installed.

 

 

Above the blue line is before I installed the font locally. Below the blue line is after. I can't see any difference between the two. As mentioned photoshop may be doing something to it like aliasing that is making you think it looks better than it does.