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

Question

I am developing a splash screen for a public Wi-Fi hotspot, and Firefox refuses to display my custom font while it works in any other browser (well, not IE <9, but this was expected).

The page should work in the following restriction:

• No access to the Internet: this page is displayed before the user accepts the term and condition, therefore everything is blocked
• The page is stored in the access point: this means that the embedded server may have been written in C, and I cannot add an extra header or anything else. Well its open source, so it's possible, but I'm definitely not an embedded developer!
• Wi-Fi is used to advertise the small town in which it is offered, so it should be as beautiful as possible.

To satisfy these restrictions, I used @ font-face with uri data, for example:

@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 works like a charm ... Except Firefox. Now I understand that it will not work in older IE, but I am ready to work with it. But it seems strange to me that the so-called modern browser will not offer this feature. Why is this not working?

EDIT: Of course, I have a lot of ideas for returning, but my question is more: why does Firefox have such behavior that does not match with other browsers? Is this a security setting? Error implementing uri data? Size limit for uri data?

Answer 1

In the end, the problem was that I used the woff font generator, which created the wrong font. Safari and IE were able to read it, but Firefox and the latest version of Chrome rejected it because it had some errors. Using the later woff font generator, I was able to get it to work in the entire browser.

The correct woff font generator

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

See error reporting for more details:

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

I want to thank Jonathan Kew of Mozilla for providing the answer.

Answer 2

To reduce HTTP requests, a subset and Base64 have embedded a couple of websites in my CSS (Font Squirrel @ font-face generator, advanced settings, and I used icomoon.io for icon fonts).

I think that I was very smart, I served them from a static subdomain ... Do not go into Firefox.

It turns out that this was a restrictive parameter of the cross-domain resource, which, apparently, is unique to Firefox. When I downloaded the HTML5 Boilerplate "standard" .htaccess file, it specifically resolves it, and it took care of the problem.

Hope this helps future readers, it prompted me for a while ... sorry if my conditions are not accurate, I'm still pretty new to this (this is well explained in the comments and documents of H5BP.htaccess).