@font-face not working

Question

HI, I am pretty sure that I'm doing something wrong in that @font-face config, because it's not working in any browser, here is my css file:

@font-face {
     font-family: BodyFont;
     src: url('../ItcKabMed.eot');
     src: local('ITC Kabel'),
          url('../Kabel_ITC') format('opentype'),
          url('../Kabel_ITC') format('svg');
}
body {
  font-family: 'BodyFont';
  color: #797979;
  background: url("") repeat-x scroll 0 0 #d7d7d7;
  min-width: 1000px;
}

Some ideias, why my font is not showing up?!

Erick Petrucelli · Accepted Answer · 2011-05-09 14:15:33Z

2

Like you can see here, to achieve crossbrowser success when using @font-face we need to use many font formats. So, convert your font to eot, ttf and svg and explicit use this formats:

@font-face {
    font-family: 'ITC Kabel';
    src: url('ITCKabel.eot');
    src: local('ITC Kabel'), 
         local('ITCKabel'), 
         url('ITCKabel.ttf') format('truetype'),
         url('ITCKabel.svg#font') format('svg'); 
}

answered May 9, 2011 at 14:15

Erick Petrucelli

15.1k9 gold badges68 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arthur Neves Over a year ago

right!.. now I realize that I just have the font in PostScript format! and I have to convert it to those others types. I`m trying to use some online converters but none of them are workin! dont know why!

Erick Petrucelli Over a year ago

PostScript isn't a widely used format like TrueType then online tools could had problems interpreting it. Maybe be better to use some Mac program to do it. I'm not a Mac user, then I couldn't test, but FontForge looks very promising. If it don't works too, maybe your font has some problem. Try with another font to see if the problem is with the font itself.

Matti Virkkunen · Accepted Answer · 2011-05-09 14:09:41Z

2

Are you sure you didn't forget the file extensions from your font paths?

answered May 9, 2011 at 14:09

Matti Virkkunen

65.4k9 gold badges138 silver badges162 bronze badges

1 Comment

Arthur Neves Over a year ago

um.... the point is, the file(font) I have its without any extension. Im using mac, and if I go to the properties of the files it`s saying- kind: Font Suitcase

Collectives™ on Stack Overflow

@font-face not working

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related