Clever Geek Handbook

Web font not showing in Firefox

http://miche.com/

This is the strangest thing. We use two web fonts and their different weights in the above page: Benton Sans and Jubilat, both of which we are licensed. H2 ("Interested in joining Miche?" "Already a Miche representative?") Configured to Jubilat Regular and displays correctly in Firefox; however, h1 ("Welcome") is Jubilat Light and appears as Times New Roman.

Both weights are generated using Font Squirrel. Both are hosted on the same server. Both are encoded the same way. I have reloaded the files. I've tried if IE so FF doesn't try to use .eot. Before you say that: yes, I tried bulletproof.

Why regular show when there is no light? I wonder if I'm 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;
}
+3


source to share


5 answers


I understood that. Firefox didn't accept absolute links and wanted relative links instead. Combined with Mo'Bulletproof, I was able to make it look like this:

@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 figured this out, I should be able to fix other fonts. Thank you three for your suggestions.

+9


source


Just want to inform you that htaccess can also be customized (described by Yu-Jie Lin )

its code:



<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
+7


source


Your fonts are not loaded / linked correctly.

jubilatlightwebfont.woff , for example, gives a 404 error.

Take a look at the Firefox web console. It throws some errors like:

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: elements h2

use too Times New Roman

).

+4


source


I took a look at your CSS and it looks like you are defining your font incorrectly for your H2, so it defaults to TimesNewRoman:

#main-container h2.jubilat {
 color: #701271;
 font-family: "jubilat"; // <----------------
 font-size: 18px;
 font-weight: normal;
 text-align: center;
}
+3


source


try using the implemented base64 encoded font files in 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 great ...

0


source






More articles:


All Articles