title: AMP: Custom font using font-face not working
body: <p>I am trying to use a custom font using font-face in my AMP pages, but the font is not rendered. The console says "Font download timed out for icons".</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
    font-family: 'icons';
    src: url('/fonts/icos2/icomoon.ttf?126oo9') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  [class^="icon-"], [class*=" icon-"] {
      font-family: 'icons';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  .icon-clock:before {
      content: "\e94e";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"&gt;&lt;/script&gt;
  
  &lt;amp-font layout="nodisplay"
    font-family="icons"
    timeout="2000"
    on-error-remove-class="icons-loading"
    on-error-add-class="icons-missing"
    on-load-remove-class="icons-loading"
    on-load-add-class="icons-loaded"&gt;
  &lt;/amp-font&gt;
  
  &lt;span class="icon-clock"&gt;&lt;/span&gt;
  &lt;span class="ribbon-txt"&gt;Text&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The font is being fetched via HTTPS.</p>
  
  <p>Any help will be strongly appreciated.</p>
  
  <p>Thanks!</p>