4

I am designing a splash page for a public wifi access point and Firefox refuse to display my custom font, while it work in every other browser (well, not IE < 9 but that was expected).

The page need to work in the following constraint :

  • No access to the Internet : This page is displayed before the user accept the term and condition, so everything is blocked
  • The page is stored on the access point : That mean an embedded server probably written in C, and I can't really add additional header or something. Well its open source so it may be possible, but I am most certainly not an embedded developer!
  • The WiFi is used to advertise the small town in which it is offered, so it should be as pretty as possible.

To meet those constraint I used the @font-face with a data uri, like so :

@font-face {
    font-family: Lato-Light;
    src: url(data:application/font-woff;base64,<large base64 string>) 
         format('woff');
}

h1{
    font-family: Lato-Light, Helvetica, sans-serif;
}

It work like a charm... Except in Firefox. Now I understand that it won't work in older IE, but I am ready to work with that. But it seem strange to me that a so-called modern browser would not offer that feature. Why isn't this working?

EDIT : Of course, I have a lot of idea for fallback, but my question here is more : Why does firefox have this behavior that is not the same as the other browsers? Is it a security setting? A bug in the data-uri implementation? A size limit for the data-uri?

Laurent Bourgault-Roy
  • 2,774
  • 1
  • 30
  • 36
  • You can't serve the font as another resource on the same access point that's already serving this page? – ephemient Mar 14 '12 at 02:16
  • Maybe. I have yet to explore the possibility, so I am doing it for a worse case scenario. I haven't had access to the real hardware yet, but the guy who asked me to do it was not sure it was possible. But still, my question was more : Hey, why doesn't firefox behave like everybody else? – Laurent Bourgault-Roy Mar 14 '12 at 02:22
  • This should work. Do you have a link to a page that shows the problem? – Boris Zbarsky Mar 15 '12 at 14:56

2 Answers2

4

In the end, the problem was that I used a woff font generator that produced an incorrect font. Safari and IE were able to read it, but Firefox and the latest version of Chrome rejected it since it contained some errors. By using a more recent woff font generator, I was able to make it work across all browser.

The correct woff font generator

http://people.mozilla.org/~jkew/woff/

For more detail, check that bugs report :

https://bugzilla.mozilla.org/show_bug.cgi?id=735556

I'd like to thank Jonathan Kew of Mozilla for providing the answer.

Laurent Bourgault-Roy
  • 2,774
  • 1
  • 30
  • 36
  • 2
    Using the font-generator in my answer, it work. I have a page with an embedded font that display fine in every browser, and I am looking at it right now. However if you just typed "woff font converter" in Google, you may have encountered the same invalid font generator than me (http://orionevent.comxa.com/otf2woff.html). And its easy because its my second result on Google. I sent them a bug report but haven't heard back. – Laurent Bourgault-Roy Apr 25 '12 at 01:44
  • So when convert to base64 will be OK ? – user956584 May 04 '12 at 13:45
  • Yes, it will work across every browser. On UNIX you can do : `sfnt2woff yourfont.ttf` then `base64 -i yourfont.woff -o yourfont.woff.base64` and then copy/paste the content of yourfont.woff.base64 in the html file. – Laurent Bourgault-Roy May 04 '12 at 18:04
  • On: fontsquirrel.com/fontface/generator they repair this issue and everthing work fine. Other on-line font generator are not-working should be: url(data:application/x-font-woff not data:font/woff – user956584 Aug 03 '12 at 20:09
-1

To cut down on HTTP requests, I subset and Base64 embedded a couple webfonts into my CSS (Font Squirrel @font-face generator, advanced settings, and for icon fonts I used icomoon.io).

Thinking I was really clever I served them from a static subdomain...No go in Firefox.

Turns out it was a restrictive cross-domain resource setting that is apparently unique to Firefox. When I uploaded the HTML5 Boilerplate 'standard' .htaccess file, it specifically permits it and it took care of the problem.

Hope it helps future readers, it stumped me for a while...sorry if my terms lack precision, I'm still pretty new at this (it is well explained in the H5BP .htaccess comments and docs).

adam-asdf
  • 646
  • 7
  • 16