Smother web fonts in chrome

Web fonts are awesome but if we set them to smaller size then we can see some pixels and they looks bad.

This is what we get from font-face generator

@font-face {
    font-family: 'icons';
    src: url('fonts/icons.eot');
    src: url('fonts/icons.eot?#iefix') format('embedded-opentype'),
         url('fonts/icons.woff') format('woff'),
         url('fonts/icons.ttf') format('truetype'),
         url('fonts/icons.svg#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

And this is how it should be if we want smooth icons/fonts:

@font-face {
    font-family: 'icons';
    src: url('fonts/icons.eot');
    src: url('fonts/icons.eot?#iefix') format('embedded-opentype'),
         url('fonts/icons.svg#icons') format('svg'),
         url('fonts/icons.woff') format('woff'),
         url('fonts/icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Just move svg before woff.

Before:

After:

As you can see, some icons looks better when they're crispy.

We can create a special class for crispy icons. Here's how to do that:

@font-face {
    font-family: 'icons';
    src: url('fonts/icons.eot');
    src: url('fonts/icons.eot?#iefix') format('embedded-opentype'),
         url('fonts/icons.svg#icons') format('svg'),
         url('fonts/icons.woff') format('woff'),
         url('fonts/icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'icons-crisp';
    src: url('fonts/icons.eot');
    src: url('fonts/icons.eot?#iefix') format('embedded-opentype'),
         url('fonts/icons.woff') format('woff'),
         url('fonts/icons.ttf') format('truetype'),
         url('fonts/icons.svg#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

.i:before {
    font-family: 'icons';
    font-style: normal;
    display: inline-block;
    line-height: 1;
    font-size: 1.25em;
    margin-right: .25em;
}

.i--crisp:before {
    font-family: 'icons-crisp';
}