Is there a web font that renders better than others in browsers?

Is there a good web font you ever used that renders perfectly in all browsers (all browsers compatible with @font-face)?


If the active word here is “perfectly,” then the answer is almost certainly no, for reasons that have little to do with the fonts themselves. Font rendering is notoriously difficult across operating systems and even across browsers at times. Even if the font is well-tuned, an XP rig with ClearType turned off is going to negate it.

However, I know from firsthand experience that, just like how some pre-digital-era typefaces just don’t do all that great on the screen, plenty of modern fonts just aren’t optimized for every device. I’m sure your question is probably more geared toward avoiding this sort of situation.

Cloud Typography by Hoefler&Co.

One service that I cannot recommend more strongly is Hoefler&Co.’s Cloud Typography. As their site shows, they put in the time to make their fonts work everywhere, and it’s not just for show – I remember being blown away when I first got to see their fonts on a Windows system. At the risk of sounding too promotional of one service, here are some of their words:

Because Cloud.typography delivers different font files to each type of browser, ScreenSmart fonts can use different engineering strategies to play to the strengths of each environment.

Every character in a ScreenSmart font is equipped with a set of detailed instructions called “hints,” which tell its outlines how to adapt themselves to pixel grids at different point sizes. On Windows, ScreenSmart fonts are built to target the individual RGB elements within a pixel, to deliver extraordinary results in text.

Fonts commissioned by digital companies.

Take, for example, Open Sans:

Open Sans is a sans-serif typeface designed by Steve Matteson and commissioned by Google. According to Google, it…is “optimized for legibility across print, web, and mobile interfaces.”

Keep an eye out for phrases like “optimized for legibility across print, web, and mobile interfaces.”

Ubuntu commissioned a font that was optimized for the screen. Adobe made Source Sans Pro, and it looks pretty good on Chrome in XP.

Google Web Fonts really is a solid resource in this context. They know you’re using the fonts for the screen and seem to have curated a collection of fonts that work well across browsers with that in mind.

Microsoft’s ClearType fonts

An extension of the previous section.

Since MS’s systems tend to be the problematic ones in this type of question, I think it’s worth noting that they have created an excellent set of fonts that are well-optimized for the screen. The ClearType fonts (available for web font licensing at Ascender) shipped with Vista, but they look pretty good on XP as well both in memory and in a quick test or two I ran on my XP VM just now.

Look for the right fonts and test

I don’t know every foundry and font out there; it’s a big world. And while it would be easy for me to say “you get what you pay for,” that’s not even the case 100% of the time. Some free fonts are better than some paid fonts, particularly when it comes to digital features.

However, it’s pretty safe to say that most of what’s on a free font site like DaFont can’t be trusted across platforms. That kind of work can fill a niche, but the fonts usually weren’t developed with the idea of spending hours to perfect the hinting in mind. Same story with FontSquirrel, though they’re a little better. If you go to a more exclusive site like FontShop, you’ll find more expensive fonts that cover a broader range of weights, but that means there’s a better chance that a designer put the time in to test on different browsers and operating systems. However, beware of fonts with older copyright dates – they may be beautiful on paper but not on the screen.

If you’re not sure, test! Go to and use that with VirtualBox to test on old browsers and operating systems for free.

More reading

Source : Link , Question Author : Riad Kanane , Answer Author : Community

Leave a Comment