title: Converting and rendering web fonts to base64 - keep original look
body: <p>I want to defer font loading on my site inspired by <a href="https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7" rel="noreferrer">deferred font loading logic for Smashing Magazine</a>.</p>
  
  <p>Main part of this is converting fonts to base64 and preparing your CSS file. My steps so far:</p>
  
  <ol>
  <li>Pick fonts on <a href="https://fonts.google.com/" rel="noreferrer">Google Web Fonts</a> and download them.</li>
  <li>Use <a href="http://www.fontsquirrel.com/tools/webfont-generator" rel="noreferrer">Font Squirrel Webfont Generator</a> to convert downloaded TTF files to CSS file with base64 embedded WOFF fonts (Expert options -> CSS -> Base64 Encode).</li>
  <li>Load CSS file async (not important here).</li>
  </ol>
  
  <hr>
  
  <p>CSS snippet for Open Sans Bold:</p>
  
  <pre><code>@font-face {
    font-family: 'Open Sans';
    src: url(data:application/x-font-woff;charset=utf-8;base64,&lt;base64_encoded&gt;) format('woff');
    font-weight: 700;
    font-style: normal;
  }
  </code></pre>
  
  <p>The <strong>problem is</strong>, that converted <strong>fonts look a lot different</strong>. Take a look at Open Sans Bold:
  <img src="https://i.stack.imgur.com/SEmsd.gif" alt="GWF vs base64 rendering comparison"></p>
  
  <p>Especially notice accents being way off and absolutely horrible letter <code>a</code>. Other font families and variants look very noticeably different as well (size and shape distortions, etc.).</p>
  
  <hr>
  
  <p>So the question is: <strong>How do you properly encode TTF files from Google Web Fonts (or other source) to base64 format and use it in a way that the result is identical to the original file?</strong></p>