Google WebフォントがAngularで使用されていませんか？

Question

私はAngularプロジェクトをangular-cliで設定しました。私はそれは私が私のstyles.scssに

/* You can add global styles to this file, and also import other style files */ 
@import url('https://fonts.googleapis.com/css?family=Roboto'); 

// Set Global Font 
body { 
    font-family: 'Roboto', sans-serif; 
    margin: 0; 
} 

それを宣言しているかの方法は、しかし、それはサンセリフの代わりRobotoにデフォルトとにかくフォントのように思えるので、私は私のウェブサイトでRobotoフォントをバンドルしたいと思います。 index.htmlの中に同じ効果を追加しようとしました。

P.S.関連する場合はわからないが、私はまた、非常に同じファイルに材質アイコン

// Import Material Icons 
@font-face { 
    font-family: 'Material Icons'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Material Icons'), 
     local('MaterialIcons-Regular'), 
     url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'), 
     url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'), 
     url('../node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype'); 
} 

を追加し、これは何とかプロジェクトに影響を与えるだろうか？

Answer 1

を（ローカルバージョンは不要）をホストされていないあなたは、@角度/ CLIのプロジェクトに取り組んでいるので、私は.scssファイルの作品にリンクことを疑います。

以下を追加 '[0] .stylesアプリ' NPM介しroboto-fontfaceをインストールし、角度-cli.jsonのスタイル配列に角度-cli.jsonスタイルアレイにおいて

npm install roboto-fontface --save 

それをリンク

"styles": [ 
     ... 
     "../node_modules/roboto-fontface/css/roboto/roboto-fontface.css" 
     ... 
    ] 

そして、npm startと角度-CLIでのスタイル

Answer 2

これが私の作品：

注意を！素材のアイコンは、Googleフォントに

@import url('//fonts.googleapis.com/css?family=Roboto|Material+Icons'); 

body { 
    font-family: 'Roboto', sans-serif; 
} 
body:after { 
    font-family: 'Material Icons'; 
    content: 'star'; 
}