style_system | @font-face browser compatibility issues

Hey! So it's me again. I've got a promblem with my @font-face tag that for some reason isn't showing up in Firefox. Works in Chrome with no issues at all, but Firefox keeps defaulting to my back-up fonts.

How it looks in Chrome/How I want it to look

How it looks in Firefox

/*@font-face*/

@font-face {

font-family: "Bebas Neue";

src: url(http://dl.dropbox.com/u/59359072/BebasNeue-webfont.eot);

}

@font-face {

font-family: "Bebas Neue";

src: url(http://dl.dropbox.com/u/59359072/BebasNeue-webfont.ttf) format("opentype");

}

/* Colours:

#B5BFBD - PALE VIOLET

#7C7D78 - DARK GREY

#E6E6E6 - LIGHT GREY

#F26A53 - RED */

/* Basics */

body {

background-color: #fff29D;

font-family: "Arial Narrow", "Century Gothic", Helvetica, Arial, sans-serif;

font-size: 14px/1.2em;

letter-spacing: -1px;

color: #7C7D78;

padding: 0;

margin: 0;

text-align: left;

}

a, a:link, a:visited {

color: #F26A53;

text-decoration: none;

}

blockquote {

background: url() no-repeat;

padding: 10px;

color: #F26A53;

font-family: Georgia;

font-style:  italic;

text-align:  justify;

}

code, kbd, pre, tt {

font-family: Helvetica, Arial, sans-serif;

font-size: 1em;

background: #FEFDFB;

border: 1px solid #E6E6E6;

}

b, i, s, u, emphasise, abbr, strong, strike { color: #7C7D78; }

/* previous next navigation buttons */

.topnav, .bottomnav {
	color: #F26A53;

padding-top: 20px;

padding-bottom:20px;

text-align: center;

font-family: "Bebas Neue";

font-size: 1.5em;

position: relative;

left:-5%;
	}

.topnav {
	display: none}

.page-separator, li.page-separator, ul .page-separator, ol page-separator { 
	display:inline;

color: #7C7D78;

padding: 5px;
	}

.navigation ul {

display: inline;

padding: 0;

margin: 0;
	}

.navigation li {
	display: inline;
	
	list-style-type: none;
}

/* CONTENT */

#header {

float: left;

font-size: 1.8em;

font-family: "Bebas Neue", "Arial Narrow", Helvetica, sans-serif;

text-transform: uppercase;

text-shadow: 3px 3px 5px #666;

color: #F26A53;

letter-spacing: 6px;

position:relative;

top: 100px;

left: 50%;

background:transparent url() no-repeat top center;

z-index: 10;

}

h2#title {

float: left;

position: relative;

left: -50%;

}

h2#pagetitle {display: none;}

#footer {

clear: both;
	width: 100%;
}

#canvas	{

width: 600px;
	z-index: 10;

}

#primary {

float: left;

z-index: 50;

padding: 100px 0px 0px 0px;

margin: 10px 10px 10px 300px;

width: 100%;

text-align: left;

}

#secondary {

float: left;

position: absolute;

top: 30%;

left: 50%;

margin: 0 auto;

font-size: 1.5em;

background: transparent;

z-index: 100;

}

#tertiary {

float: right;

display: block;

position: fixed;

top: 300px;

right: 10%;

clear: both;

width: 200px;

}

/*navigation bar under header*/

.module-navlinks {

margin: 0;

padding: 0;

font-family: "Century Gothic";

font-size: 1.1 em;

position: relative;

top: -50%;

left: -55%;

}

.module-navlinks li {

float: left;

list-style-type: none;

margin: 0 0 0 0.5em;

padding: 0.25em;

background: transparent;

color: #7C7D78;

}

.module-navlinks a {

color: #7C7D78;

text-decoration: none;

text-transform: lowercase;

font-size: 15px;

}

.module-navlinks .clear {

clear: left;

height: 1px;

margin-top: -1px;

}

/*SIDEBAR MODULES*/

.module-header {

display: block;

font-size:0px;
}
.module-typelist {

margin: 0;

padding: 0;

font-family: "Bebas Neue";

}

.module-typelist ul {
	
	list-style-type: none;

margin: 0;

padding: 0;

}

.module-typelist a {
	
	display: block;

overflow: hidden;

padding: .4em;

margin-bottom: 2px;

background: transparent url();

text-transform: uppercase;

width: 200px;

text-align: left;

color: #F26A53;

font-family: "Bebas Neue", "Arial Narrow";

text-transform: uppercase;

font-size: 1.4em;

font-weight: bold;

letter-spacing: 0.4em;	
}

.module-typelist a:hover {
	text-shadow: 3px 3px 5px #999;
}
/* ENTRY CONTENT */

.entry {

background-color: #F9F9F9;

width: 500px;

padding: 20px;

margin: 0px;

margin-bottom: 30px;

font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

font-size: 1.2em;

border: 10px solid #F9F9F9;

}

.entry-content {

padding-top: 10px;

margin: 10px 0px;

text-align: justify;

}

.entry-content img {
	 
	max-width: 100%;

border: 10px solid #F9F9F9;
		
}

.entry-content video {
	
	max-width: 100&;

}

.entry-title {
	
	display: block;

padding: 5px 50px 5px 10px;

margin: 0;

font-family: "Bebas Neue", "Arial Narrow", Arial, Sans-serif;

text-transform: uppercase;

font-size: 1.2em;

overflow: hidden;

}

.entry-title a {
	
	background: #E6E6E6 url ();

font-family: "Bebas Neue", "Arial Narrow", sans-serif;

color: #7C7D78;

}

.entry-title: hover  {
	color: #F26A53;
}

.userpic {

display: block;

float: left;

position: relative;

top: 10px;

padding: 0 0 0 0;

margin: -110px 0 0 -170px;

}

.userpic img {

width: 100px;

height: 100px;

border: 10px solid #F9F9F9;

box-shadow: 3px 3px 5px #666;

-webkit-box-shadow: 3px 3px 5px #666;

-moz-box-shadow: 3px 3px 5px #666;

}

/* Metadata and Tags */

.metadata {

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

text-transform: lowercase;

}

div.metadata ul {

list-style: none;

padding: 0px;

margin: 0px;

}

div.metadata ul li {

display: inline;

text-align: left;

list-style-type: none;

padding: 0px;

margin: 0px;

}

span.metadata-item-location, span.metadata-item-music, span.metadata-item-mood, div.tag ul  {

display: inline;

list-style-type: none;

list-style-position: outside;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

}

.tag {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

}

span.tag-text {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

}

div.tag ul li {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

ul.entry-management-links {

display: block;

text-align: center;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

color: #7C7D78;

}

ul.entry-management-links li {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

color: #7C7D78;

}

ul.entry-management-links a {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

color: #7C7D78;

}

ul.entry-interaction-links {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

ul.entry-interaction-links li {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

ul.entry-interaction-links a {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

.tag, .entry-interaction-links, .entry-management-links, .comment-interaction-links, .comment-management-links {

display: inline;

font-family: "Bebas Neue", "Arial Narrow", "Helvetica", Arial;

padding: 2px;

}

I'd be super grateful for any help at all!

Threaded | Flat

I'm not sure if this is your problem, but you're calling a sourced TTF as type=opentype instead of type=truetype.

It's not a bug, it's a feature.

Firefox has a security feature that does not allow font files to be called from a different domain from the one that hosts the site and the CSS files. It's meant to stop people using fonts they don't have a license for and for other security reasons.

There are workarounds, but so far, I can't find one that will work without control of the server where the font is located. I did see one guy say that he just changed the URL so there was no http:// and it worked for him, but I haven't had time to test that theory, so take that with a giant grain of salt, but it might be worth a try.

@font-face browser compatibility issues

no subject

(no subject)

(no subject)

no subject