title: Material icons font not rendering for some customers
body: <h1>Problem</h1>
  
  <p>I'm running into an odd, not really reproducible, issue with <a href="https://design.google.com/icons/" rel="nofollow">Google Material icons</a>. However, a small portion of users are having issues with the font not rendering, I assume the problem is the font resource is not being loaded at all. I've confirmed the issue exists and is wide spread across all OSes, browsers and devices. I used a render test for this confirmation:</p>
  
  <pre><code>export default function () {
    let promise = new $.Deferred();
    // Font we know everyone has, in our case it just needs to be variable width
    let fallbackFontFamily = 'sans-serif';
    // The font we're testing
    let fontFamily = 'Material Icons';
    // Add a mix of characters to the DOM so we can measure them. The character
    // choice here is mostly trial and error, trying to differentiate widths
    // between the two fonts
    let $tester = $('&lt;span&gt;@|iLnQW&amp;#xE838;&lt;/span&gt;')
        .css('position', 'absolute')
        .css('visibility', 'hidden')
        .css('fontSize', '300px');
  
    $('body').append($tester);
  
    function test(repeat) {
      if (repeat == null) {
        repeat = 0;
      }
      // measure the element as if the font has not loaded
      let fallbackWidth = $tester.css('fontFamily', fallbackFontFamily).outerWidth();
      // measure the element as if the font *has* loaded
      let actualWidth = $tester.css('fontFamily', `${fontFamily}, ${fallbackFontFamily}`).outerWidth();
  
      // if the font has successfully loaded, the widths should not be the same!
      if (fallbackWidth !== actualWidth) {
        promise.resolve();
      } else if (repeat === 0) {
        promise.reject(new Error(`font, ${fontFamily}, failed to load`));
      } else {
        // repeat until finished
        setTimeout(() =&gt; test(--repeat), 100);
      }
    }
  
    // of course, we clean up after ourselves
    promise.always(() =&gt; $tester.remove());
  
    test(10); // repeat 10x
    return promise;
  }
  </code></pre>
  
  <p>This is reporting each error back to us, and it appears that roughly 3% of all traffic is affected. I still haven't reproduced the issue myself, except for intentionally messing with the network. A simple refresh tends to fix the problem, further leading me to believe it's a resource loading problem, but on the browser, or OS's part, not the network.</p>
  
  <h1>Debugging</h1>
  
  <p>With the issue now being measured I've started to take a few steps to address the issue, none of this has produced any results, but is probably useful to know:</p>
  
  <ul>
  <li>Originally, the Google hosted stylesheet and fonts were being used, <a href="http://google.github.io/material-design-icons/#setup-method-1-using-via-google-web-fonts" rel="nofollow">as instructed here</a>.</li>
  <li>I switched to a self hosted stylesheet, to eliminate that network request. I simply copied and pasted it from the original.</li>
  <li>Then I began self hosting the fonts and updated <code>@font-face</code> accordingly. I left the Google hosted versions as a fallback, simply for redundancy.</li>
  <li>Finally I removed the local version of the font from <code>@font-face</code> in case customers have some oddly broken version of the font (at this point I'm just trying anything, no clue if this would actually <em>do</em> anything)</li>
  </ul>
  
  <p>The final state of the stylesheet:</p>
  
  <pre><code>@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
         url(../fonts/MaterialIcons-Regular.woff) format('woff'),
         url(../fonts/MaterialIcons-Regular.ttf) format('truetype'),
         url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2'),
         url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5RV6cRhDpPC5P4GCEJpqGoc.woff) format('woff'),
         url(https://fonts.gstatic.com/s/materialicons/v17/2fcrYFNaTjcS6g4U3t-Y5StnKWgpfO2iSkLzTz-AABg.ttf) format('truetype');
  }
  
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  </code></pre>
  
  <p>I have confirmed that the self hosted fonts do work correctly in the normal case. I believe this testing has eliminated <em>most</em> of the potential for error on my end. Now I just have no idea what is happening. Are some browsers just not loading the font at all? Are there any other ways that I should be measuring or monitoring these kinds of issues? And, most importantly, how can I fix this!?</p>