CODEWITHSUNDEEP
htmlcssfonts
Andrea Turri
Andrea Turri

Reputation: 6500

Best way to render different fonts

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 enter image description here

Windows enter image description here

Upvotes: 0

Views: 633

Answers (2)

philipp
philipp

Reputation: 16515

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…

Upvotes: 3

Alan Shortis
Alan Shortis

Reputation: 1109

What exactly do you mean by 'grainy'? I only ever see that in older versions of internet explorer, and there are CSS properties for font smoothing.

Using TypeKit uses @font-face, it's just loaded in a different way. Have you tried Google's webfonts too?

Here is a great article on the best method to use: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), 
       url('GraublauWeb.woff') format('woff'), 
       url('GraublauWeb.ttf') format('truetype');
}

Upvotes: 1

Related Questions