@font-face rendering issues

marxistalert's picture

(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!

ralf h.'s picture

You should use the webfont provided here:

Just uploading a commercial font to your website can get expensive:

marxistalert's picture

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

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).

marxistalert's picture

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

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!

Syndicate content Syndicate content