I am able to display fonts in chrome, but not in firefox. I'm wondering if this is an issue because I'm using the bootstrap framework. Here's my 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 it to my server, only one font is now appearing in chrome... and local sourcing wasn't working so I removed it. I am quite confused. http://caseymmiller.com/galapagos/bootstrapInvasive/Invasive.html
This is what I have in the css now. I tried what you listed before, but when sourcing both urls for each font, none of them would appear. That's why some are commented out right now. These are the sources that I want to use from now 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");*/
}