title: How to know if a font (@font-face) has already been loaded?
body: <p>I'm using Font-Awesome, but while the font files are not loaded, the icons appear with .</p>
  
  <p>So, I want these icons to have <code>display:none</code> while files are not loaded.</p>
  
  <pre><code>@font-face {
    font-family: "FontAwesome";
    src: url('../font/fontawesome-webfont.eot');
    src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  </code></pre>
  
  <p>How do I know that these files have been loaded and I'm finally able to show the icons?</p>
  
  <p><strong>Edit:</strong>
  I'm not talking when the page is loaded (onload), because the font could be loaded before the whole page.</p>