title: Webfonts or Locally loaded fonts?
body: <p>Ever since the troubles brought on by using <em>Cufon</em> I ventured away from using external font resources, but as of late, I have been looking for alternate methods of loading fonts to see if there's a better way; better methods have a way of just appearing out of the blue.</p>
  
  <p>There are a lot of new methods out there, and variations for each method it seems; Should I use <em>typekit</em>? or <em>google webfonts</em> (with js or css)? should I continue to use locally loading fonts (e.g. fontsquirrel.com generated method)? </p>
  
  <p>I'll list the methods that seem the most well received below, with some tests, but is it really worth moving to a webfont? It seems like it would carry a higher resource load (http requests) and have less file format types (less compatibility) etc. But looks like files are loaded async and efficiently in most cases.</p>
  
  <ol>
  <li>Is it just a matter of situation and need? If so, what are they?</li>
  <li>Are there drastic differences between these methods?</li>
  <li>Is there a better method out there I haven't listed?</li>
  <li>What are the pro's/con's for performance? Look? dependencies? compatibilities?</li>
  </ol>
  
  <p>I'm really looking for best practices here, performance is a big thing but so is scalability and ease of use. Not to mention, look and feel.</p>
  
  <hr>
  
  <h2><strong>Google CSS</strong></h2>
  
  <ul>
  <li>only uses external stylesheet</li>
  <li>only uses smallest compatible file type</li>
  <li>can use <code>@import</code> or <code>&lt;link&gt;</code> or take the contents of the styleshee (<code>@font-face</code>) and put it directly into your own stylesheet.</li>
  </ul>
  
  <p><strong>test results</strong></p>
  
  <blockquote>
  <pre><code>  78ms load of html
    36ms load of css
  </code></pre>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/ARy4Y.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <h2><strong>Google JS Method</strong></h2>
  
  <ul>
  <li>uses <code>webfont.js</code> to load styleshet</li>
  <li>only uses smallest compatible file type</li>
  <li>appends <code>:root</code> element with class</li>
  <li>adds script to head.</li>
  </ul>
  
  <p><strong>test results</strong></p>
  
  <blockquote>
  <pre><code>    171ms load of html
      176ms load of js
      32ms load of css
  </code></pre>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/E6eCr.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <h2><strong>Typekit method</strong></h2>
  
  <ul>
  <li>appends <code>:root</code> element with class.</li>
  <li>can use <code>*.js</code> snippet or externally loaded file <code>*.js</code> file</li>
  <li>uses <code>data:font/opentype</code> instead of font file.</li>
  <li>adds script to head</li>
  <li>adds embedded css to head</li>
  <li><p>adds external stylesheet to head</p>
  
  <p><em>you can easily add/remove/adjust fonts and targetted selectors from typekit.com</em></p></li>
  </ul>
  
  <p><strong>test results</strong></p>
  
  <blockquote>
  <pre><code>  169ms load of html
    213ms load of js
    31ms load of css
    3ms load of data:font/
  </code></pre>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/gEVPu.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <h2><strong>&hellip;&amp; the Font Squirrel Method</strong></h2>
  
  <pre><code>@font-face{
      font-weight:400;
      font-style:normal;
      font-family:open_sanslight;
      src:url(../font/opensans-light-webfont.eot);
      src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
          url(../font/opensans-light-webfont.woff) format(woff),
          url(../font/opensans-light-webfont.ttf) format(truetype),
          url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
  }
  </code></pre>
  
  <p>&hellip;or with data:font method&hellip;</p>
  
  <pre><code>@font-face {
      font-family: 'open_sanslight';
      src: url('opensans-light-webfont-f.eot');
  }
  
  @font-face {
      font-family: 'open_sanslight';
      src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
           url('opensans-light-webfont-f.ttf') format('truetype'),
           url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
      font-weight: normal;
      font-style: normal;
  
  }
  </code></pre>