google chrome - @font-face fonts within bootstrap css not displaying in firefox -

google chrome - @font-face fonts within bootstrap css not displaying in firefox -

i able display fonts in chrome, not in firefox. i'm wondering if issue because i'm using bootstrap framework. here's code:

@font-face { font-family:"bodyfont"; src: url("http://caseymmiller.com/galapagos/fonts/museosans_300.otf"); } body { margin: 0; font-family: "bodyfont"; font-size: 15px; line-height: 20px; color: #333333; background-color: #ffffff; }

also, upon uploading server, 1 font appearing in chrome... , local sourcing wasn't working removed it. quite confused. http://caseymmiller.com/galapagos/bootstrapinvasive/invasive.html

this have in css now. tried listed before, when sourcing both urls each font, none of them appear. that's why commented out right now. these sources want utilize on.

@font-face { font-family:"headerfont"; src: url("http://livinggalapagos.org/static/fonts/qhyts__.ttf"); /*src: url("http://livinggalapagos.org/static/fonts/qhyts__.woff");*/ } @font-face{ font-family:"subheadfont"; src: url("http://livinggalapagos.org/static/fonts/museosans_500.ttf"); src: url("http://livinggalapagos.org/static/fonts/museosans_500.woff"); } @font-face{ font-family:"bodyfont"; src: url("http://livinggalapagos.org/static/fonts/museosans_300.ttf"); /*src: url("http://livinggalapagos.org/static/fonts/museosans_300.woff");*/ }

@font-face complicated property. here resources might help code "cross-browser" @font-face.

https://developer.mozilla.org/pt-br/docs/css/@font-face

http://www.fontsquirrel.com/tools/webfont-generator

css google-chrome firefox twitter-bootstrap fonts