title: Embedded Font Styling - Embedded Font Styles vs CSS Styling
body: <p>I'm hoping to understand what the difference is between embedding fonts in a site like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>@font-face {
      font-family: 'Kulturista Medium';
      src: url('fonts/Kulturista Medium.eot');
      src: local('☺'), url('fonts/Kulturista Medium.woff') format('woff'), url('fonts/Kulturista Medium.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  @font-face {
      font-family: 'Kulturista Semibold';
      src: url('fonts/Kulturista Semibold.eot');
      src: local('☺'), url('fonts/Kulturista Semibold.woff') format('woff'), url('fonts/Kulturista Semibold.ttf') format('truetype'), url('fonts/Kulturista Semibold.svg') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  @font-face {
      font-family: 'Kulturista Semibold Italic';
      src: url('fonts/Kulturista Semibold Italic.eot');
      src: local('☺'), url('fonts/Kulturista Semibold Italic.woff') format('woff'), url('fonts/Kulturista Semibold Italic.ttf') format('truetype'), url('fonts/Kulturista Semibold Italic.svg') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>
  
  <p>vs. just loading one single font like this</p>
  
  <pre class="lang-css prettyprint-override"><code>@font-face {
      font-family: 'Kulturista';
      src: url('fonts/Kulturista.eot');
      src: local('☺'), url('fonts/Kulturista.woff') format('woff'), url('fonts/Kulturista.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>
  
  <p>and styling with CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
    font-family: 'Kulturista', Fallback, sans-serif;
    font-style: italic;
    font-weight: bold;
  }
  </code></pre>
  
  <p>I imagine there's a benefit, otherwise you wouldn't want to load more resources.  </p>