angular2-cli include custom fonts
<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>