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?

回答1:

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.

回答2:

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