@font-face browser compatibility issues

[thoitaxh]

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!

Comments

[caltastic]

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

[thoitaxh]

Thanks for catching that! (I swear, my eyes sometimes just don't fucking work.) Mozilla still isn't using the right font, but this helps anyway!

[ex_awakened208]

I thought Dreamwidth didn't even support @font-face. Whenever I used Google web fonts, I had to drop them into the "External Stylesheet" box. Maybe try putting the url to the font there too and see what happens?

[carene_waterman]

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.