angular - angular2-cli にはカスタム フォントが含まれています

Question

プロジェクトにいくつかのカスタム フォントを含めようとしていますが、うまくいきません。

注: angular-cli を使用しています: angular-cli@1.0.0-beta.21

1. フォントをフォルダに入れる

   src/assets/fonts/Roboto-Regular.tff

2. 追加しますsrc/styles.css

   @font-face {
     font-family: "Roboto-Regular";
     src: url("./assets/fonts/Roboto-Regular.tff");
   }
   

3. コンポーネントで使用します.scss

   font-family: "Roboto-Regular";
   

4. 404 エラーが発生します。

   Cannot find module "./assets/fonts/Roboto-Regular.tff"
   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
   

   5. font-face 定義を追加すると、 app.component.scss404 エラーも発生します

      jquery.js:2 GET http://localhost:4200/assets/fonts/Roboto-Regular.tff 404
      

Roboto-Regular.tff フォントを含める方法についてのアイデアはありますか?