Web fonts are awesome Show archive.org snapshot . After being restricted to Arial for two decades there is finally a cross-browser way to embed fonts into web pages.

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

Read more Show archive.org snapshot

Unfortunately while web fonts look awesome on Linux and MacOS, they look horrible on Windows Show archive.org snapshot , a problem that gets worse with smaller font sizes.

The culprit is something called font hinting Show archive.org snapshot :

... hinting is about... programming instructions that fine-tune a font’s rasterisation, the process by which its mathematically ideal outlines are mapped onto a monitor’s pixels.

Because hinting is an ardous and time-intensive task, the hinting information embedded into font files is usually very bad, especially for unexpensive fonts. In order to remedy this, Linux and MacOS ignore hinting information in font files and replace it with auto-hinting, an algorithm that works better than embedded hinting most of the time. Windows does not employ auto-hinting, causing horrible rendering for most fonts.

Embedding autohinting information into font files

A solution is to autohint fonts and replace the existing (bad) hinting with the autohinting information.

To do this, first save a badly hinted font in Truetype (.ttf) information. Now use ttfautohint Show archive.org snapshot to generate an autohinted TTF font:

ttfautohint myfont.ttf myfont_autohinted.ttf

In order to support all desktop browsers, we need to offer one other font format, EOT. You can use ttf2eot Show archive.org snapshot for that, which some friendly soul has also made available on the web Show archive.org snapshot .

In order to support iOS devices (not Android), we need to offer one additional font format, SVG. There is a Java application ttf2svg Show archive.org snapshot that might help you out, but I haven't tried it yet.

Now you can link your new, autohinted font files in a @font-face declaration like this:

@font-face
  font-family: 'MyFont'
  src: url('myfont_autohinted.eot')
  src: local("☺"), url('myfont_autohinted.eot?#iefix') format('embedded-opentype'), url('myfont_autohinted.ttf') format("truetype")
  font-weight: normal
  font-style: normal

Congratulations! Your font rendering on Windows is now 10 times more awesome than before. The rendering quality on other OSs should not change since they weren't using embedded hinting information in the first place.

I attached before/after comparison screenshots for all major Windows browsers to this note.