title: What's the correct way of using CSS3 font-face?
body: <p>Could someone please help me understand what's the correct way of using CSS3 font-face. Below are some font-face declarations, which one is correct and why?</p>
  
  <pre><code>/* START OF SAMPLE CODE # 1 */
  @font-face {
      font-family: 'WebFont';
      src: url('webfont.eot');
      src: url('webfont.eot?#iefix') format('embedded-opentype'),
           url('webfont.woff') format('woff'),
           url('webfont.ttf') format('truetype'),
           url('webfont.svg#WebFont') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  @font-face {
      font-family: 'WebFont';
      src: url('webfont-bold.eot');
      src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
           url('webfont-bold.woff') format('woff'),
           url('webfont-bold.ttf') format('truetype'),
           url('webfont-bold.svg#WebFont-Bold') format('svg');
      font-weight: bold;
      font-style: normal;
  }
  h1 {
      font-family: 'WebFont', blah, blah, blah;
      font-weight: bold;
  }
  h2 {
      font-family: 'WebFont', blah, blah, blah;
      font-weight: normal;
  }
  /* END OF SAMPLE CODE # 1 */
  </code></pre>
  
  <p>=========</p>
  
  <pre><code>/* START OF SAMPLE CODE # 2 */
  @font-face {
      font-family: 'WebFont';
      src: url('webfont.eot');
      src: url('webfont.eot?#iefix') format('embedded-opentype'),
           url('webfont.woff') format('woff'),
           url('webfont.ttf') format('truetype'),
           url('webfont.svg#WebFont') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  @font-face {
      font-family: 'WebFontBold';
      src: url('webfont-bold.eot');
      src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
           url('webfont-bold.woff') format('woff'),
           url('webfont-bold.ttf') format('truetype'),
           url('webfont-bold.svg#WebFont-Bold') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  h1 {
      font-family: 'WebFontBold', blah, blah, blah;
      font-weight: normal;
  }
  h2 {
      font-family: 'WebFont', blah, blah, blah;
      font-weight: normal;
  }
  /* END OF SAMPLE CODE # 2 */
  </code></pre>
  
  <p>=========</p>
  
  <pre><code>/* START OF SAMPLE CODE # 3 */
  @font-face {
      font-family: 'WebFont';
      src: url('webfont.eot');
      src: url('webfont.eot?#iefix') format('embedded-opentype'),
           url('webfont.woff') format('woff'),
           url('webfont.ttf') format('truetype'),
           url('webfont.svg#WebFont') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  @font-face {
      font-family: 'WebFontBold';
      src: url('webfont-bold.eot');
      src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
           url('webfont-bold.woff') format('woff'),
           url('webfont-bold.ttf') format('truetype'),
           url('webfont-bold.svg#WebFont-Bold') format('svg');
      font-weight: bold;
      font-style: normal;
  }
  h1 {
      font-family: 'WebFontBold', blah, blah, blah;
      font-weight: bold;
  }
  h2 {
      font-family: 'WebFont', blah, blah, blah;
      font-weight: normal;
  }
  /* END OF SAMPLE CODE # 3 */
  </code></pre>
  
  <p>The difference in these code samples, is the way "Bold" font is being declared and used. Please advise, which one is correct from these and why?</p>
  
  <p>PS: I am sorry for such a long question/sample. I just wanted to provide as much information as I could to avoid confusion.</p>
  
  <blockquote>
    <p>Edit 1: Even though as mentioned by @Jukka in one of the answers below, the logical approach is to use "Code #1", but I just checked Safari and the bold font renders way too much bolder on Safari as compared to other browsers, but if I use "Code #2" all browsers render the same, so it does appear that there is something going on behind the scenes when using different font-face declarations. So at this moment I seem "Code #2" is the way to go, what say!</p>
  </blockquote>