title: angular2-cli include custom fonts
body: <p>I am trying to include some custom fonts in my project with no success.</p>
  <p>NOTE: I am using angular-cli: angular-cli@1.0.0-beta.21</p>
  <ol>
  <li><p>I put the fonts in the folder</p>
  <p>src/assets/fonts/Roboto-Regular.tff</p>
  </li>
  <li><p>I add in <code>src/styles.css</code></p>
  <pre><code>@font-face {
    font-family: &quot;Roboto-Regular&quot;;
    src: url(&quot;./assets/fonts/Roboto-Regular.tff&quot;);
  }
  </code></pre>
  </li>
  <li><p>I use it in a component <code>.scss</code></p>
  <pre><code>font-family: &quot;Roboto-Regular&quot;;
  </code></pre>
  </li>
  <li><p>I get 404 error:</p>
  <pre><code>Cannot find module &quot;./assets/fonts/Roboto-Regular.tff&quot;
  client?93b6:80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css
  Module not found: Error: Can't resolve './assets/fonts/Roboto-Regular.tff' in 'D:\Work\Blah\angular\BlahFrontEnd\src'
  resolve './assets/fonts/Roboto-Regular.tff' in 'D:\Work\Blah\angular\BlahFrontEnd\src'
    using description file: D:\Work\Blah\angular\BlahFrontEnd\package.json (relative path: ./src)
      Field 'browser' doesn't contain a valid alias configuration
    after using description file: D:\Work\Blah\angular\BlahFrontEnd\package.json (relative path: ./src)
      using description file: D:\Work\Blah\angular\BlahFrontEnd\package.json (relative path: ./src/assets/fonts/Roboto-Regular.tff)
        as directory
          D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff doesn't exist
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js doesn't exist
  [D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff]
  [D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff]
  [D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts]
  [D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js]
   @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css 6:793-837
   @ ./src/styles.css
   @ multi styles
  </code></pre>
  <ol start="5">
  <li><p>If I add the font-face definition in <code>app.component.scss</code> I get 404 error as well</p>
  <pre><code>jquery.js:2 GET http://localhost:4200/assets/fonts/Roboto-Regular.tff 404
  </code></pre>
  </li>
  </ol>
  </li>
  </ol>
  <p>Any ideas on how to include my Roboto-Regular.tff font?</p>