Font-Face is not working with Chrome

Question

I'm working on some front-end project and i got an issue with font-face. The font is ok with Firefox but with Chrome it looks ugly, like a Time News Roman..

Here is the code is used to import the font to my Sass project:

@font-face {
  font-family: 'aHeadline';
  src: local(' Headline'),
  url('../fonts/headline.woff') format('woff'),
  url('../fonts/headline.ttf') format('truetype'),
  url('../fonts/headline.svg') format('svg');
  src: url('../fonts/headline.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

Here is a live demo http://185.13.36.42/T/foo.html

NB: The fonts comes from the Font Squirrel webfont generator

http://stackoverflow.com/questions/4051826/font-face-problem-in-chrome — MiKE, Feb 09 '14 at 18:04
Maybe this can help: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/ — MiKE, Feb 09 '14 at 19:21

score 0 · Accepted Answer · answered Feb 09 '14 at 20:35

0

Just a little syntax change. This will work for you:

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

answered Feb 09 '14 at 20:35

Arkadiusz Lendzian

417
3
6

It does ! Where did you find this solution ? – Xavier Feb 10 '14 at 21:15
I use it this way after "http://www.fontsquirrel.com/" (props!) fontface generator proposes this solution. I have also tested it for your demo in case that something else caused the problem. – Arkadiusz Lendzian Feb 19 '14 at 12:40

Font-Face is not working with Chrome

1 Answers1