Anthony Wijaya, making things for businesses and passionate creatives

How to Fix Your Terribly Rendered Web Fonts

You have found the perfect font for your new website, congratulations! The font looks great in your design, and you have typed in your code. A few clicks later, the browser opens, and then you find out that it looks blurry, jaggy or just outright terrible. But why? And more importantly, “How can I fix this?”.

Why Your Font Looks Terrible

Be warned, the fixes I’m going to tell you are not the official fix for the issue, it’s merely hacks I put together which happens to work for me. It’s okay if you’re now opening a new tab and heading off to another google search.

A quick search on google seems to point out that free fonts just suck. But it’s free, and if you’re not used to buying fonts, the price tag can really do a number on you. The good ones (or the ones I really, really want) often ranges from $300/font-weight, and you usually buy at least 2 or 3 (Bold, Light, Regular). Most importantly, free fonts are not all that terrible, heck, most of them are really, really good. At least more than the standard Microsoft Office fonts that is. (I’m looking at you Comic Sans)

A deeper research seems to point out altogether that it’s the browser’s fault, and because I already took the time to figure out the why’s and how’s for you guys, I’m just going to share it to you so you don’t have to look around.

So here’s the thing, it seems that Windows is the problem here, since people in the internet has pointed out to me that things look great in Mac machines. This might not make sense given that the font looks fine installed on your machine, but everything I found out points to the fact that most Internet browsers in Windows doesn’t implement this Windows feature called Direct Write, a feature which allows ClearType (clearer) rendering on fonts. Guess which one does: Internet Explorer, yes that big E staring at you besides the start icon.

Go ahead, open your html/php/whatever in IE and you’ll find out that it looks great again! Obviously you’re now wondering how you can do the same for Chrome/Firefox/etc. I’ll just answer it here: you can’t, not officially anyway.

Font Rendering Fix

The Quick Fix:

The quick fix is typing chrome://flags in the search bar (if you’re using Chrome) and enabling Direct Write. For Firefox, you can type in about:config, click through the warning, do a search for ‘Render’ or ‘Direct Write’ and enable it. Your font should now either break horribly or render gloriously. Well this fix is not really a fix though, since you can’t really tell every one of your potential visitors to go through all this hassle. I myself disabled this option again for development reasons.

The Better Fix:

In my opinion, the better way to fix this pesky font rendering issue is to run your font files through Font Squirrel’s Web Font Generator. Put in your font file (I use TTF), choose the font format you want, and then select TTF Auto Hint. I didn’t change the other options. You’ll then get another set of fonts which hopefully looks better now. It’s so easy that you just have to try it for yourself.

The main problem that has your fonts crazy is apparently called Hinting which is this technique for fonts that I’m having trouble putting together. Font Hinting seems to be a technique which, when done correctly, will allow the font to render correctly in every browser. Unfortunately, font hinting seems to only exist on paid fonts, since it is apparently really difficult/cumbersome and is done manually by hand. I think all paid fonts have hinting on them, but a little research seems to say otherwise: that not all paid fonts have hinting, and only the most expensive ones like Proxima Nova, Gotham and the like. So be sure to try your font first if you plan to buy one. The fix I suggested you to do does an automatic version of hinting, which worked for me.

Anyhoo, this fix might not work for you, sorry for that, but it did work quite well on my Roboto font (the one I used in my site).

The Best Fix:

Just wait. Seriously, just wait until Chrome/Mozilla/Opera fix this for you. Or tell all your visitors to use a Mac. And then change to one yourself. That should work.

Jokes aside, I think waiting is the best solution here.

Edit: Chrome 37, which is still in Beta right now apparently fixes this problem by implementing DirectWrite like IE does. It’s probably going to be released soon, so this is great news! You can download it here: Chrome 37 Beta

How To Prevent It From Happening Again To You

That glorious feeling when you found your perfect font after hours of searching is certainly, well, glorious. But you probably came here because of it breaking in your browser. Most importantly, you can probably avoid the dissapointment if you did a quick research on how the font really looks in browsers first before jumping straight to code. I use sites like Typewolf to see how fonts really look in the wild. It also serves as a source of inspiration for those who are searching for font combinations and the like.

That’s all folks.