Font-Face Not loaded
Solution 1:
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
Solution 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;
}