title: Use multiple @font-face rules in CSS
body: <p>How can I use more than <code>@font-face</code> rule in my CSS?</p>
  
  <p>I've inserted this into my stylesheet:</p>
  
  <pre><code>body {
      background: #fff url(../images/body-bg-corporate.gif) repeat-x;
      padding-bottom: 10px;
      font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
  }
  
  @font-face {
      font-family: 'GestaReFogular';
      src: url('gestareg-webfont.eot');
      src: local('☺'),
           url('gestareg-webfont.woff') format('woff'),
           url('gestareg-webfont.ttf') format('truetype'),
           url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
  }
  </code></pre>
  
  <p>This currently only applies for the whole body of text on the site. But, I would like to specify <code>h1</code> to use a different font. How can I do this?</p>