CODEWITHSUNDEEP
cssgoogle-chromefontsfont-faceantialiasing
Tasos
Tasos

Reputation: 1642

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

Upvotes: 0

Views: 4436

Answers (2)

tweedman23
tweedman23

Reputation: 319

I'll refer you to this question: https://stackoverflow.com/a/4060778/1121870

Or try font-smooth: http://www.w3.org/TR/WD-font/#font-smooth-prop

And there's a nasty little hack here: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

Upvotes: 1

user1976613
user1976613

Reputation:

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

Upvotes: 2

Related Questions