@font-face rendering issues

Primary tabs

6 posts / 0 new
Last post
Alex Tristram's picture
Offline
Joined: 19 Jul 2011 - 5:33pm
@font-face rendering issues
0

(Hopefully I've posted this in the right section...)

I'm putting together a website, and I thought I'd give using the @font-face feature a whirl, to allow me to embed some non-standard typefaces. My initial efforts to get this working are using ITC American Typewriter, font-squirrelled for a cross-compatible webkit, and embedded in my website, as instructed, thus:

@font-face {
font-family: 'AmericanTypewriterBold';
src: url('fonts/americantypewriterstd-bold-webfont.eot');
src: url('fonts/americantypewriterstd-bold-webfont.eot?iefix') format('eot'),
url('fonts/americantypewriterstd-bold-webfont.woff') format('woff'),
url('fonts/americantypewriterstd-bold-webfont.ttf') format('truetype'),
url('fonts/americantypewriterstd-bold-webfont.svg#webfont') format('svg');
font-weight: bold;
font-style: normal;
}

I works. But. It looks pretty shitty. I've also tried using it on a different face (clarendon, which I don't think is licensed to be used with @font-face, but I'm just at the point of playing rather than finalising anything at the moment...), which looks a bit better, but American Typewriter looks especially bad/different to how it should... Apart from being a bit unclean, it renders heavier and tracks closer together than it should. Oddly though it renders really nicely on my iphone, in spite of looking rubbish in chrome/safari on my macbook.

Any suggestions and/or advice on the subject? Many thanks!

TG's picture
TG
Offline
Joined: 8 May 2003 - 2:39pm
0

You should use the webfont provided here:
http://webfonts.fonts.com/en-us/Project/ChooseFonts#keyword%3Damerican%2...

Just uploading a commercial font to your website can get expensive:
http://blog.extensis.com/font-compliance/rick-santorums-website-using-pi...

Alex Tristram's picture
Offline
Joined: 19 Jul 2011 - 5:33pm
0

Okay, so licensing issues aside (which admittedly I've not looked hard enough into the implications of yet), what's the difference between the webfont that you have linked to on fonts.com and the webfonts that I've embedded using the @font-face function? Even looking at the preview render on fonts.com it's not as smooth as the iphone render of my embedded typewriter webkit, and certainly not as smooth as the display in Illustrator or similar... Anyone able to provide any background on discrepancies between browser/output/etc?

Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
0

Different combinations of browsers and OS and font settings (font format, font smoothing settings and hinting information) produce very different results.

In short:

For body copy to look good (sharp, readable) across browsers you need a well hinted (see end of paragraph) font with truetype curves. The worst environment is typically Win XP with default settings and non-IE browsers: extremely few fonts hold up here. Most web font services serve truetype curves, but the hinting quality (code helping to interpret curves as pixels on screen) varies wildly. In this case the good ones are far between because hinting is such a time consuming task.

For headlines to look good (smooth) across browsers, you need a web font with postscript curves and in some cases good postscript hinting. These are not commonly available yet, but Typekit has begun serving them for at least some fonts. Again, Windows is a causing trouble and doesn't support the use of postscript curves until IE9, so you'll need a font with truetype curves (.eot) as a backup, and it will look jagged! This backup should also have some light y-direction hinting (too specific for you, but this is for example the level of hinting typically served by Fontshop).

Alex Tristram's picture
Offline
Joined: 19 Jul 2011 - 5:33pm
0

Thanks! I think I just about understand most of that...

So in short:

* Webfonts are still a bit hit and miss whatever your approach, due to different browsers/operating systems/combinations of both...

* At this point in time there is no completely failsafe method of getting your font to appear perfectly on all systems..?

Frode Bo Helland's picture
Joined: 26 Feb 2007 - 1:03pm
0

Correct. With a little work you can get decent headlines in most cases. With a lot of work you can get decent text in most cases, but what constitutes decent text is not the same in all environments. And if "most cases" is acceptable to you is another discussion altogether.

For now this work needs to be done by the type designer. In the future, we'll most likely have better rendering engines that take care of the problem.

There are some good webfonts out there, you just have to look for them!