lu_41q
Last Updated: February 25, 2016
·
2.977K
· idered

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';
}

1 Response
Add your response

15119

Thanks for the advice it did work for Chrome. Do you know if there is any way of making it work in Firefox? Thanks

over 1 year ago ·