Search code examples
cssfont-face

@font-face not working

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?!

Solution

  • 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'); 
}