Web font not showing in Firefox - html

Question

http://miche.com/
This is the strangest thing. We're using two web fonts and their varying weights on the above page: Benton Sans and Jubilat, both of which we have licenses for. The h2 ("Interested in joining Miche?" "Already a Miche Representative?") is set to be Jubilat Regular, and is properly showing up in Firefox; however, the h1 ("Welcome!") is Jubilat Light, and appearing as Times New Roman.
Both weights are generated with Font Squirrel.
Both are hosted on the same server.
Both are coded in the same way.
I've reuploaded the files.
I've tried if IE so FF doesn't try to use .eot.
Before you say it: Yes, I have tried Bulletproof.
Why is Regular showing up when Light isn't? I wonder if I'm just not using the right combination of CSS.
#font-face {
font-family: 'JubilatLight';
src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot');
src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot?#iefix') format('embedded-opentype'),
url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.woff') format('woff'),
url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf') format('truetype'),
url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.svg#JubilatLight') format('svg');
font-weight: normal;
font-style: normal;
}
#main-container h1.jubilat {
font-family: "JubilatLight";
font-weight: normal;
font-size: 40px;
color: #701271;
text-align: center;
}

Answer 1

I figured it out. Firefox wasn't accepting absolute links, and instead wanted relative. Coupled with Mo'Bulletproof, I was able to get it to show up like so:
#font-face{ /* for IE */
font-family:JubilatLight;
src:url(/FileUploads/CMS/Documents/jubilatlightwebfont.eot);
}
#font-face { /* for non-IE */
font-family:JubilatLight;
src:url(http://:/) format("No-IE-404"),url(/FileUploads/CMS/Documents/jubilatlightwebfont.ttf) format("truetype");
}
#main-container h1.jubilattest {
font-family: "JubilatLight";
font-weight: normal;
font-size: 40px;
color: #701271;
text-align: center;
}
and then my HTML:
<div id="main-container">
<h1 class="jubilattest">WELCOME!</h1>
</div>
Now that I've figured that out, I'll be able to fix the other fonts. Thank you three for your suggestions.

Answer 2

Just want to let you know, there's also a way by configuring the htaccess (discribed by Yu-Jie Lin)
his code:
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Answer 3

Your fonts are not correctly uploaded/linked.
jubilatlightwebfont.woff for example gives a 404 error.
Take a look at the Web-Console of Firefox. It throws some errors, for example:
downloadable font: download failed (font-family: "JubilatLight" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf # https://www.miche.com/FileUploads/CMS/Documents/MicheCorp092911v2.css
(btw: the h2 elements use Times New Roman too, for me.)

Answer 4

I took a look at your CSS and it looks like you aren't correctly defining your font for your H2, so it's defaulting to TimesNewRoman:
#main-container h2.jubilat {
color: #701271;
font-family: "jubilat"; // <----------------
font-size: 18px;
font-weight: normal;
text-align: center;
}

Answer 5

try to use implemented base64-encoded font-files within the css-doc:
#font-face {
font-family:"font-name";
src:url(data:font/opentype;base64,[paste-64-code-here]);
font-style:normal;
font-weight:400;
}
source: http://sosweetcreative.com/2613/font-face-and-base64-data-uri
it worked perfectly...