1

I'm using some costume Fonts in my web site but i got probleme with one it's not loaded and i can't figure out the probleme, here's the code :

@font-face { 
    font-family: OuachitaWayWbw; 
    src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
    font-family: 'ChromeYellowNF'; 
    src: url('fonts/Chrome Yellow NF.ttf');
}

#name { 
    font-size:26px; 
    font-family: 'OuachitaWayWbw'; 
    padding-top:30px; 
    color:#000000; 
    margin-bottom:20px; 
}

The ChromeYellowNF work's. also i have tried to put each one in diffirent Font-face but did't worked.

asedsami
  • 609
  • 7
  • 26
Chlebta
  • 3,090
  • 15
  • 50
  • 99

2 Answers2

7

You have to have an @font-face declaration for each font:

@font-face { 
  font-family: OuachitaWayWbw; 
  src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
}
@font-face { 
  font-family: ChromeYellowNF; 
  src: url('fonts/Chrome Yellow NF.ttf');
}

The single quotes are not required.

If you are wanting to use custom fonts for IE9 you will need to also provide an ".eot" font file. http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

EDIT: Ok, different browsers have different ways of implementing fonts:

@font-face {
   font-family: OuachitaWayWbw; 
   src: url('fonts/Ouachita Way Wbw.ttf') format("truetype"),
        url('fonts/Ouachita Way Wbw.woff') format("woff");
   src: url('fonts/Ouachita Way Wbw.eot');
}

You may also need to add the following types to an .htaccess/IIS:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Taken from here: font-face with wrong MIME type in Chrome

Community
  • 1
  • 1
97ldave
  • 5,249
  • 4
  • 25
  • 39
  • I have made some test and look what's i got : `Resource interpreted as Font but transferred with MIME type application/octet-stream` – Chlebta Jan 11 '13 at 23:29
  • I have edited my post above - I think you need the correct font format for the browser you are using and also need to the types to an .htaccess or to the MIME types in IIS. – 97ldave Jan 12 '13 at 00:52
2

Not sure about this but it looks like your font-family name should probably be in quotes. Also you might try putting each font in there own @font-face declaration. That should solve your problem. I think it is taking the last font-family specified within the @font-face declaration.

@font-face { 
  font-family: 'OuachitaWayWbw'; 
  src: url('fonts/Ouachita Way Wbw.ttf') format("truetype") ; 
}
@font-face { 
  font-family: 'ChromeYellowNF'; 
  src: url('fonts/Chrome Yellow NF.ttf');
}

#name {
    font-size:26px; 
    font-family: 'OuachitaWayWbw'; 
    padding-top:30px; 
    color:#000000; 
    margin-bottom:20px; 
}
Sithu
  • 4,752
  • 9
  • 64
  • 110
Jesse Kinsman
  • 732
  • 2
  • 7
  • 20
  • I have already done this but with no result. and for the quotes because i have made lot of change so i forgot the rewrite them. – Chlebta Jan 11 '13 at 22:34
  • I have made some test and look what's i got : `Resource interpreted as Font but transferred with MIME type application/octet-stream` – Chlebta Jan 11 '13 at 23:30