Search code examples
firefoxcssfont-facedata-uriwoff

How to use a data uri with @font-face in Firefox

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?

Solution

  • 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.