title: CSS - Include multiple fonts in one CSS file
body: <p>How can I add more that one font in a CSS file? I have tried the following but it doesn't seem to work.</p>
  
  <pre><code>@font-face {
      font-family: 'Inspira_Reg';
      src: url('http://myfonturl.com');
  }
  
  @font-face {
      font-family: 'Inspira_Bold';
      src: url('http://myfonturl.com');
  }
  
  @font-face {
      font-family: 'Inspira_Italic';
      src: url('http://myfonturl.com');
  }
  
  @font-face {
      font-family: 'Inspira_Medium';
      src: url('http://myfonturl.com');
  }
  </code></pre>
  
  <p>And then to use the font, I simply set the font-family property in the CSS IDs like so:</p>
  
  <pre><code>#titleSection {
     margin: 25px 5px auto auto;
     font-size: 11px;
     text-align:left;
     font-family: 'Inspira_Reg';
     color: black;
  }
  </code></pre>
  
  <p>But it doesn't seem to work. The font doesn't seem to get recognized, it just seems to use Arial or whatever the default is.</p>
  
  <p>I am using the latest version of Google Chrome and the font types I am using are TTF files.</p>
  
  <p>Thanks, Dan.</p>