Search code examples
cssgoogle-chromefontsfont-faceantialiasing

Custom font not appearing correctly on Chrome

I am trying to use a custom font for my website, but it appears wrong in Chrome (latest) and Opera browsers although it appears correctly (smooth) on other browsers. I tried couple of different fonts, with same results on Chrome/Opera.

My code:

@font-face {
    font-family: 'mainFont2';
    src: url('../fonts/Eurostile.eot');
    src: local('☺'), url('../fonts/Eurostile.woff') format('woff'), url('../fonts/Eurostile.ttf') format('truetype'), url('../fonts/Eurostile.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

The issue:

enter image description here

Solution

  • Thats just how the browser and OS renders the font..but try to call the .svg format before the .woff format it might fix this.

    @font-face {
    font-family: 'mainFont2';
    src: url('../fonts/Eurostile.eot');
    src: local('☺'),
    url('../fonts/Eurostile.svg') format('svg'), 
    url('../fonts/Eurostile.woff') format('woff'), 
    url('../fonts/Eurostile.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}