Custom font not appearing correctly on Chrome

Question

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

score 2 · Accepted Answer · answered Jan 14 '13 at 22:23

2

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

answered Jan 14 '13 at 22:23

Actually, removing the woff and adding svg on top fixed that, but this font is 1.3mb so it takes couple of seconds to load. Is there a way to preload it? – Tasos Jan 14 '13 at 22:31
1

this should solve this problem http://paulirish.com/2009/fighting-the-font-face-fout/ – Jan 14 '13 at 22:34

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

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/

edited May 23 '17 at 11:48

Community

1
1

answered Jan 14 '13 at 22:26

tweedman23

189
1
9

Custom font not appearing correctly on Chrome

2 Answers2