title: Why don't Google Web Fonts render properly with direct stylesheet @fontface usage?
body: <p>I have recently struggled with achieving smooth Google Web Fonts, primarily on Windows Google Chrome.</p>
  
  <p>I had previously been using the direct stylesheet code, ripped from the URL that Google Web Fonts supplies, eg., Google supplies:</p>
  
  <pre><code>&lt;link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'&gt;
  </code></pre>
  
  <p>So I go to the URL and use the following code</p>
  
  <pre><code>@font-face {
     font-family: 'Titillium Web';
     font-style: normal;
     font-weight: 200;
     src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
  }
  </code></pre>
  
  <p>I figured this was a cheeky way to save a little more speed rather than making a request to Google, which then appears to make another request to source the font.</p>
  
  <p>I recently discovered that this was the cause of the rendering issues (see the following example for how the Windows Chrome browser renders on the Web Font page, compared to a test page I created using the process: <a href="https://imgur.com/OV2U1,ema2B" rel="noreferrer">http://imgur.com/OV2U1,ema2B</a>)</p>
  
  <p>My question is, why does the &lt;link /&gt; version make the font smooth, when it is sourcing the same font with my shorthand method? And also, is there any reason why I should be using this approach, which I figured would cut request times?</p>