Question

I was searching the best-practice to implement a font inside a website and I still didn’t found a real answer to this.

On forums and blogs many people say that using @font-face is the best way, other using Typekit or Cufon.

I don’t like these 3 options.

Font-face render my fonts grainy.

Typekit is not freeware and do not have all the font that I’d like to use.

Cufon use canvas.

There are other way to implement fonts?

There is a way to render it with no grain?

---

Screenshots:

Mac

Windows

Answer 1

Font rendering depends on the Operation system, some of the font specific settings in the OS, the browser and the font itself. The better the font is prepared for screen usage (hinting,…) the better it looks. Their is no »do it like this and it is always fine way«, there are too many factors that play a role. In the images above you are trying to render very thin font, this is always problematic, especially if the font is badly hinted and/or set in a small size. The advantage of services like TypeKit and google webfonts are that they provide you with screen optimized fonts, so if you are not familiar with fonts themself you should prefer some prepared fonts, or optimize the font yourself if it is too bad. You should also keep in mind that not every font is suitable for screen usage and i think that can be one reason why google and typekit do not provide all fonts.

good luck…

EDIT:

once I forgot to enable some kind of font rendering option on windows, I think it was somewhere at: leftclick computer > properties > performance, but I am not sure where exactly, I do not use windows anymore to find it, but the start was at »leftclick computer > properties« and it was about the »antialiasing« of fonts. After ticking the box it looked much better. It was a thin font too in this case…

greetings…