0

I'm pulling my hair out here. I can't seem to get the webfonts from myfonts.com to show up in Firefox only. Works in all other browsers. It's being loaded in an iframe if that helps.

All of my research has mentioned a plethora of fixes that I seem to already be implementing.

  • making sure your 'eot' formats are listed last
  • modify .htaccess adding Header set Access-Control-Allow-Origin "*" for filesMatch (provided by HTML5BP by default)
  • use relative paths in css like ../myfont instead of absolute paths

My "webdings.css" file looks like the following:

@import url("//hello.myfonts.net/count/2a77d0");

@font-face {
    font-family: 'Webdings';
    src: url('../fonts/2A77D0_0_0.eot');
    src: url('../fonts/2A77D0_0_0.eot?#iefix') format('embedded-opentype'),
         url('../fonts/2A77D0_0_0.woff') format('woff'),
         url('../fonts/2A77D0_0_0.ttf') format('truetype');
        }
.Webdings
{
    font-family:Webdings;
    font-weight: normal;
    font-style: normal;
}

And then my main.css file has: .content p{font-family: Webdings; text-align: center;}

Again - works in all browsers EXCEPT firefox. Any help would be appreciated.

Edit If it helps. I'm also using a google font which DOES work.

Edit 2: Changed the format back to the proper format (it still doesn't work)

I've checked the Firefox Dev Tools Network section and 2a77d0 from hello.myfonts.net does come back ok however, it's empty. The google one has fonts. I'm sure this doesn't matter as I'm hosting the fonts locally where googles are hosted on their servers.

gin93r
  • 1,551
  • 4
  • 21
  • 39
  • 1) What version of Firefox? 2) Provide a link. 3) Also, here's the no-fail, creme-de-la-creme @font-face syntax you should be using (even though yours looks fine and most likely isn't the problem) http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax – Adam Jenkins May 07 '14 at 18:50
  • 1)It was at 24, but has updated to 29 now; latest version. 2) Unfortunately cannot provide a link. 3) That's actually what it was before I moved the .eot to the end. In other words - neither of them worked. – gin93r May 07 '14 at 18:56
  • 1
    Ummmm, you have `src` properties that suggest you host the files yourself, is the myfonts thing a license tracking counter? – Ulrich Schwarz May 07 '14 at 19:10
  • I do host the files myself (stated above) but yeah I'm sure it's a license tracking counter. – gin93r May 07 '14 at 19:27
  • 1
    What does the Firefox console say? Is the font file downloaded? Any error messages? – Jukka K. Korpela May 07 '14 at 19:36
  • I'm not seeing the font itself being downloaded. With the google fonts I see the .woff files, with the local fonts, I don't see anything get downloaded. Which leads me to believe that they aren't being downloaded. Which is what I was just googling and haven't found anything specific yet. – gin93r May 07 '14 at 19:57
  • Ok - I did fail to mention above that the fonts aren't loading in an iframe in firefox - however, with that said, I've added the path to the webdings.css to that iframe and it now at least downloads the font. It still doesn't show correctly, but at least it's downloading. – gin93r May 07 '14 at 20:04
  • If it helps - it's coming over as `application/font-woff` whereas the google ones are coming over as `font/woff` – gin93r May 07 '14 at 20:14

0 Answers0