CSS font not rendering like actual font does in photoshop

HTML & CSS
1

Hello all,
I was playing with this font, that I got the author’s permission to use on the web, and trying to use it with css3 @font-face.
This was because one of the images on a site i am designing are in this font with the colour #00cc00.

So I figured with the massive amount of support with the FontSpring CSS Fonts’ syntax, why not upload the font, style it that green colour. Then the page will be faster as there is one less image.

Before doing so, I attempted to play around with this font on my own in its own html file. And I found that the when styled green and used as a css3 font, it looks different than when the same file is installed and drawn in a graphics programme.

Here is the .psd file that is a drawing with the font with the same font-colour. This, [URL=“http://dl.dropbox.com/u/270523/help/fontFaceProblems/Sketch_Block.ttf”]here, is the font that needs to be installed for the psd to look right.

However, here is an exported png of that same psd file if you do not have photoshop or want to install the font

So all is well above, but when I use the font-spring syntax then font is rendered differently using in [URL=“http://dl.dropbox.com/u/270523/help/fontFaceProblems/fontFace.html”]this html file.
In that html file, because font-squirrel isn’t converting the file into the other forms successfully right now, the only one that is linked is the original .ttf that I linked above
So I added a new line to the @font-face rule that links to the original .ttf for now along with the other types.

[QUOTE=team1504]

Hi,
Thank you for the response. Well, the fontSquirrel generator is not working or at least for this font right now. i don’t know if its my connection or if you may have any luck.

But I have the original .ttf that I installed and used when making the simple .psd and .png

Here is the .psd file of the font looking fine when the font, [URL=“http://dl.dropbox.com/u/270523/help/fontFaceProblems/Sketch_Block.ttf”]here, is installed.
And then here is the png of the psd when saved for web.

I PM’d Paul O’B and he suggested that I post a thread if necessary. The reason I feel this is necessary is that wasting an image when there is a (supported) way to do it without an image is a waste of an image and/or http header request. In other words, longer loading time.

The difference that I see is that the font, when uploaded, in the html file is a block font filled with sketch (zig-zag) marks. However, in the html file, I feel as if the font is almost bold. That there are less lines or zig-zags in the fill.
At first I thought this could be from uploading, but I am using the same font that would be installed when making that psd /png
Another thing is that it looks as if the lines or spaces in the font might just be too small to notice, but then again the size of the font in the html file and in the psd / png file is the same (72px)

Finally, it looks as if the font is more-full / over-filled, bolder, or has a heavier-font-weight? Any ideas? I mean, I dont think Photoshop even says that the file is bold or has a bold option.

Please let me know if you have any Questions, Comments, Concerns, or Solutions :slight_smile: I hope that you guys can help me fix this so the font looks like it does in the psd/png

I hope to hear from you soon!

Thanks in Advance & Best Regards,
Team 1504

2

I am finding that the font itself is rendering much more cleanly (in Opera) than the PNG export, which looks blotchy and pixelated as though Photoshop hasn’t got the antialiasing right. The vector format as rendered in the browser looks sweet as pie.

So, here’s one of each:

Question - are any customers going to be looking at the site and comparing it with the PSD and thinking “Hey, there are a few pixels here that aren’t the same!”?

Comment - As long as it looks reasonably clear and consistent within each browser, nobody but you will know that it isn’t 100% as intended.

Concern - IE is showing it in Times New Roman, which may be a bigger problem

Solution - stop worrying about trivial details that don’t matter :cool:

3

First, I love the simple format of your response. You should get an award :slight_smile:

No, they will not see the pad. But, you know who will— me :lol: And not being able to recreate what I know is possible, will bother me dearly…

And I will seriously feel corrupted for not trying my 100%
Well the reason it looks so nice in opera is because opera allows .ttf fonts to look better than other browsers.
That’s why most people drop the .ttf link and only .otf because all modern browsers support it and make it look good
I just haven’t had time to convert the file to .otf, .eot, .woff, or .avg. that’s why ie is showing in Times in New Roman because ie can not find the .eot that it will support. And that’s because I have yet to make it.

Well, I just want it to be as awesome as possible. :slight_smile: :cool:
Especially if it can be.

Here is the thing, if you open the font file. It looks more like how its rendered in the html with css fonts rather than how the points look when the font was drawn or how it looks in Photoshop.

I seriously dislike block fonts unless it makes sense to use it. And in this design, I really like the sketch look. And I want to keep that through using it on the web via css fonts. So it looks like it was sketched or the fill has sketch marks fill.

4

Given that not all browsers would use web fonts, not all operating systems use the same font rendering engine, not all programs use the same font rendering engines, and that fixed font size across browsers should NOT be used for all but the most complex of visual elements in the first place…

Who even gave you the NOTION that the font in a browser would bear any resemblance what-so-ever to the goof-assed pretty picture someone drew in photoshop?!?

Much less that if that texture is embedded in your web font, the file sizes would be so massive it would exceed the upper limit I’d allow on a page (HTML+CSS+IMAGES+SCRIPTS) by a factor of five…

Oh, and “72” in photoshop has absolutely nothing to do with browser px size – which is why it’s also larger. I forget what the exact relationship is, but I suspect PS just pulls a number out of their collective arses on that.

5

Crusty’s got it: each browser is doing its own rendering of the font, and how they do it and display it is based at least in part on either the OS of the computer or at least the Windowing system (Windows, whatever Macs use, or X11) or Desktop Environment (fonts can look different on two Linux machines based on whether you’re running Gnome or KDE or XFCE…).

Your artist heart has to let go, man : ) If you need the font to look exactly the same, you’re back to using an image.

For what it’s worth, I agree with you that using @font-face is better here: images have so few ways of being readable, while here, either I can block the @font-face and get whatever default font I want (in case you chose some goofy unreadable font, lawlz), or even if I allow @font-face, I can set with my browser:
the size of the text
the gaps/kerning (with my user.css I can set letterspacing, wordspacing, line-height…)
the colour and therefore, contrast

I can’t do all that stuff with an image… I’d have to hope you bothered either using a decent image-replacement technique, or that you used correct alt text (which most authors, 10 years later, still don’t).

6

True…

This glimmer of hope that I could replace an image with some css3 that is actually supported So I thought it would be as simple as just uploading and linking the font using @font-face… but now I know i was dead wrong

Yeah after converting it to all the types, I realised that it was one huge-ass font. And not only will it take forever to upload, but take up a bunch of more space on my server and on the user’s part as well. In fact, I think the sizes of all those font versions are (much) bigger than the image. :lol:

Really? I should have figured. You really don’t like graphics or photoshop, which you have every reason to. And I agree on many.
For example flashy-ness and graphics in web-design lead to ideas like this page made in Adobe Edge ISNT IT BEWTIFUL?!

Guess what I realised— Graphics are for Graphic Design!

Agreed and will do :slight_smile:

Thank you all for your help!

Regards,
Team 1504

7

While I understand your intent, I have to say that Stomme and DS60 are right. It is foolish to believe , even with CSS3, that you will have pixel perfect rendering, especially when it comes to fonts. When it comes to web design that shouldn’t be the goal anyway, and this is coming from an art director.

Not everyone has CSS3 capable browsers.
CSS3 support is still scattered.
Rendering engines for browsers and even operating systems vary.
Even anti-aliasing preferences will have an effect (in some cases).
That being said, font sizing will affect this too ( in cases like yours)

I took a look at your font and there are OTHER issues at work here as well that would even apply in print. The chosen font is clearly a “display typeface” and a VERY COMPLEX ONE at that. Think of it as the opposite of a pixel-font. IF this were used in print , and you had to be as fluid with type size as you do for the web, it would “render differently” as well… dot gain, and Post Script rounding would be issues to consider. On old printing presses the ink spread would fill in the “zig zags” (capillary action… you can do some fun physics experiments with this) , on digital printing similar errors may occur do to rounding ( if the gap between zig-zag is less than the smallest size the RIP can handle). Slight digression, I would not pick this font for a logotype, for example, for this very reason; there would be too much variation in its appearance on the side of a billboard and on a postage stamp. Similar to pixel fonts, display typefaces , especially complex ones , work best in a specific size rage. Even in print, you dont want to set Old English MT to 14 pts…

“But it worked in Photoshop”… yes but the PSD is NOT the original font. I think if you did an experiment and typeset the line in InDesign /or Illustrator… and zoomed in on or out you will start seeing differences in rendering too ( and that’s just the on screen preview). Heck “Create outlines” in AI… and you will see the rendering already starts to change slightly ( due to Postscript rounding) . If you saved your image as a JPG there would be even more difference or if you stayed in PS and and changed the anti-aliasing settings you would even see the font rendered in 4 slightly different ways ( which become more apparent the more complex the font is). This is what happens when you don’t follow the KISS rule.

In short, the font selection has as much to do with how pronounced the rendering differences are as the technology itself. Don’t let this jade you, the CD or AD painted you into a corner and you were trying to save an image. In this specific case, it just wasn’t possible.