title: Google I/O - Roboto Font (new version) font rendering issues in Chrome (windows)
body: <p>After listening to the latest Google I/O stream I was more than happy that they released a new version/update for their own font Roboto in their style guide.</p>
  
  <ul>
  <li><a href="http://www.google.com/design/spec/style/typography.html#" rel="nofollow">http://www.google.com/design/spec/style/typography.html#</a></li>
  </ul>
  
  <blockquote>
    <p>! Note that this one is newer than the one in their webfont
    repo !</p>
  </blockquote>
  
  <p>This is a screenshot of after(top) and before the update (bottom): </p>
  
  <ul>
  <li><a href="http://img.konrad-abe.de/stackoverflow/screenshot-roboto-new_01.png" rel="nofollow">http://img.konrad-abe.de/stackoverflow/screenshot-roboto-new_01.png</a></li>
  </ul>
  
  <p>This is a live demo of the bold versions: </p>
  
  <ul>
  <li><a href="http://demo.konrad-abe.de/stackoverflow/roboto-font-preview/" rel="nofollow">http://demo.konrad-abe.de/stackoverflow/roboto-font-preview/</a></li>
  </ul>
  
  <p>As I use Roboto in more than one project (web sites and web apps, both desktop and responsive) I was thrilled to implement it immediately. The preview was clean and well spaced and all but while testing, I had to find out, that the Google Chrome (latest stable) on Windows has problems rendering the bold and bold-italic versions of the font.</p>
  
  <blockquote>
    <p>a's and e's have the inner space filled with color and the i's dots seem to merge with the shaft of the letter.</p>
  </blockquote>
  
  <p>I'm using all versions via font-face:</p>
  
  <pre><code>/* ROBOTO REGULAR FONT
   * page main font
   * can be used with
   * - thin/100    ( + italic)
   * - regular/400 ( + italic)
   * - bold/700    ( + italic)
   */
  /* ROBOTO regular / 400 */
  @font-face {
      font-family: 'Roboto-Regular';
      src: url('/includes/fonts/roboto-regular.eot');
      src: url('/includes/fonts/roboto-regular.eot?#iefix') format('embedded-opentype'),
      url('/includes/fonts/roboto-regular.woff') format('woff'),
      url('/includes/fonts/roboto-regular.ttf') format('truetype'),
      url('/includes/fonts/roboto-regular.svg#Roboto-Regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  /* ROBOTO regular / 400 + italic */
  @font-face {
      font-family: 'Roboto-Regular';
      src: url('/includes/fonts/roboto-italic.eot');
      src: url('/includes/fonts/roboto-italic.eot?#iefix') format('embedded-opentype'),
      url('/includes/fonts/roboto-italic.woff') format('woff'),
      url('/includes/fonts/roboto-italic.ttf') format('truetype'),
      url('/includes/fonts/roboto-italic.svg#Roboto-Regular') format('svg');
      font-weight: normal;
      font-style: italic;
  }
  /* ROBOTO bold / 700 */
  @font-face {
      font-family: 'Roboto-Regular';
      src: url('/includes/fonts/roboto-bold.eot');
      src: url('/includes/fonts/roboto-bold.eot?#iefix') format('embedded-opentype'),
      url('/includes/fonts/roboto-bold.woff') format('woff'),
      url('/includes/fonts/roboto-bold.ttf') format('truetype'),
      url('/includes/fonts/roboto-bold.svg#Roboto-Regular') format('svg');
      font-weight: bold;
      font-style: normal;
  }
  /* ROBOTO bold / 700 + italic */
  @font-face {
      font-family: 'Roboto-Regular';
      src: url('/includes/fonts/roboto-bolditalic.eot');
      src: url('/includes/fonts/roboto-bolditalic.eot?#iefix') format('embedded-opentype'),
      url('/includes/fonts/roboto-bolditalic.woff') format('woff'),
      url('/includes/fonts/roboto-bolditalic.ttf') format('truetype'),
      url('/includes/fonts/roboto-bolditalic.svg#Roboto-Regular') format('svg');
      font-weight: bold;
      font-style: italic;
  }
  /* ROBOTO thin / 100 */
  @font-face {
      font-family: 'Roboto-Regular';
      src: url('/includes/fonts/roboto-thin.eot');
      src: url('/includes/fonts/roboto-thin.eot?#iefix') format('embedded-opentype'),
      url('/includes/fonts/roboto-thin.woff') format('woff'),
      url('/includes/fonts/roboto-thin.ttf') format('truetype'),
      url('/includes/fonts/roboto-thin.svg#Roboto-Regular') format('svg');
      font-weight: 100;
      font-style: normal;
  }
  /* ROBOTO thin / 100 + italic */
  @font-face {
      font-family: 'Roboto-Regular';
      src: url('/includes/fonts/roboto-thinitalic.eot');
      src: url('/includes/fonts/roboto-thinitalic.eot?#iefix') format('embedded-opentype'),
      url('/includes/fonts/roboto-thinitalic.woff') format('woff'),
      url('/includes/fonts/roboto-thinitalic.ttf') format('truetype'),
      url('/includes/fonts/roboto-thinitalic.svg#Roboto-Regular') format('svg');
      font-weight: 100;
      font-style: italic;
  }
  </code></pre>
  
  <p>The other font files seem to render correct and this one does so as well on Mac/Chrome but Win/Chrome has problems rendering Roboto bold and Roboto bolditalic for font sizes between 13px and 16px  for a's and e's and between 10px and 14px for the i's.</p>
  
  <p>I "fixed" it by using the .woff files of the old roboto version for bold and bolditalic but that's hardly a fix, I'd call it a dirty workaround... </p>
  
  <p>Any ideas?</p>