title: Google web fonts not rendered in IE8
body: <p>I have looked at this: <a href="https://stackoverflow.com/questions/9050747/google-web-fonts-dont-work-in-ie8">Google Web Fonts don&#39;t work in IE8</a>, and this: <a href="https://stackoverflow.com/questions/3694060/how-to-make-google-fonts-work-in-ie">How to make Google Fonts work in IE?</a>. Neither works for me. The first suggests not to import too many fonts at once, while the latter is out of date since the bug was fixed back in 2010.</p>
  
  <p>The HTML is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
          &lt;head&gt;
                  &lt;meta charset="utf-8"&gt;
                  &lt;title&gt;Font Test&lt;/title&gt;
                  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
                  &lt;meta name="description" content="Google Fonts Test"&gt;
  
                  &lt;link type='text/css' href='https://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet'&gt;
                  &lt;link type='text/css' href='https://fonts.googleapis.com/css?family=Play:700' rel='stylesheet'&gt;
                  &lt;link type='text/css' href='https://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet'&gt;
                  &lt;!--&lt;link type='text/css' href='//fonts.googleapis.com/css?family=Lato:900' rel='stylesheet'&gt;--&gt;
  
                  &lt;link type="text/css" href="https://static.mysite.com/blah/font-test.css" rel="stylesheet"&gt;
          &lt;/head&gt;
          &lt;body&gt;
                  &lt;div class="page-title"&gt;
                          This Is Title
                  &lt;/div&gt;
                  &lt;div class="page-content"&gt;
                          This is content
                  &lt;/div&gt;
          &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the corresponding CSS:</p>
  
  <pre><code>body {
          height: 100%;
          width: 960px;
          min-height: 550px;
          max-height: 1080px;
          margin: 20px 60px 40px 20px;
          padding-left: 10px;
          padding-right: 10px;
  
          background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKklEQVQIW2OceOe1cb6K6FkGJAASYwTxkSVhbLAETBJEw3Tjl8BqFC7LAdSSJR3onNbEAAAAAElFTkSuQmCC) repeat;
  }
  
  .page-title {
          height: 55px;
          font: 38px "Play";
  }
  
  .page-content {
          font: 16px "Cantarell";
          width: 630px;
          text-align: justify;
  }
  </code></pre>
  
  <p>The above is tested in latest Chrome, which works fine. It however does not work in IE8 for some reason. Anything I am missing?</p>
  
  <p><strong>UPDATE</strong>: IE8 simply does NOT work with Google Fonts API. In fact, if I use IE8 to browse the specimen of many fonts on the Google Fonts API pages, none of them renders correctly. The only sure way to use these fonts is to convert them to <code>EOT</code> type (among with <code>WOFF</code> type), and serve them from your server, which is a shame because you cannot use Google's CDN anymore.</p>