title: How to use a data uri with @font-face in Firefox
body: <p>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 &lt; 9 but that was expected). </p>
  
  <p>The page need to work in the following constraint :</p>
  
  <ul>
  <li>No access to the Internet : This page is displayed before the user accept the term and condition, so everything is blocked</li>
  <li>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!</li>
  <li>The WiFi is used to advertise the small town in which it is offered, so it should be as pretty as possible.</li>
  </ul>
  
  <p>To meet those constraint I used the @font-face with a data uri, like so :</p>
  
  <pre><code>@font-face {
      font-family: Lato-Light;
      src: url(data:application/font-woff;base64,&lt;large base64 string&gt;) 
           format('woff');
  }
  
  h1{
      font-family: Lato-Light, Helvetica, sans-serif;
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>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?</p>