What web font format has the highest quality?
The font quality largely depends on how the fonts are converted. You may choose to remove things that effect anti-aliasing and quality like kerning to save file size which many people do. The better the look, the bigger the size. Another factor that goes into the fonts is the host OS. They have certain ways they do things that can affect the way fonts render.
Also, this is just kind of random, but you can throw this into your code:
text-shadow: transparent 0 0 1px;
It will improve anti-aliasing, albeit only in Google Chrome for the time being.
If you want to use a special font on the web, then the format choice is pretty much made for you by the browsers, and you will need EOT, WOFF, TTF, and SVG all to be available.
A site like FontSquirrel will provide guidance as well as the font files themselves.
There are three factors that affect quality display of the font:
- Quality of the font. Some fonts are poorly made, some are missing characters, some have ligature issues, etc. I suggest testing the font across all browsers before committing to it.
- Browser rendering of the font. Chrome, Safari, FF and IE display render fonts differently.
- Formats readable by the browser: each also can only read a limited number of formats. (EOT for IE, TT for pretty much everything else, including FF, and there's more).
In conclusion: web fonts are still somewhat of a dark and mysterious art. Invariably, there will be minor differences. Find a well built font, and test it across your target browsers. I think we're still very much in the trial and error phase with @font-face, but there are good resources to help along the way.
When it comes to Windows, embedded fonts using @font-face render horribly with ClearType ON.
Try this radical experiment: turn ClearType OFF, and recheck the font rendering.
While this seems to make no sense (the opposite should happen), you should find the fonts now look smooth and natural.
This happens for me and I can provide evidence if necessary. The same web page will render fine in Linux, Mac etc without doing any such OS-level tinkering. Yay Windows.
I am still trying to determine a work-around for this, because obviously you can't ask everyone looking at your website who's using Windows to turn ClearType off so your fonts will look good.