Google 웹 글꼴이 각도로 사용되지 않습니까?

Question

각기둥으로 각도 프로젝트를 설정했습니다. 나는 그것이 수행 방법은 내가

/* 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; 
} 

그러나 내 styles.scss에 선언 그래서 나는 폰트처럼 대신 Roboto로의 산세 리프에 어쨌든 기본값을 것 같다, 내 웹 사이트와 Roboto로 글꼴을 번들하고 싶습니다. 같은 효과 index.html 안에 링크를 추가하려고했습니다.

P. 관련했는지 확실하지 않습니다,하지만 난이 어떻게 든 프로젝트에 영향을 미칠 수있는, 바로 그 파일에 자료 아이콘

// 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

를 호스팅하지 않습니다, 나는 의심 그 .scss 파일 작업에 링크되어 있습니다.

는 NPM 통해 Roboto로 - fontface를 설치하고 볼록 cli.json 스타일 배열의 볼록 cli.json

npm install roboto-fontface --save 

의 스타일 어레이에 연결 '앱 [0] .styles "다음에 추가

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

그리고, npm start 내가 로컬 모든 호스트하려고하지만, 실험을 위해 내가 로컬 및 구글 웹 폰트, EIT를 통해 부하 글꼴을 시도

각도-CLI를

Answer 2

이 나를 위해 작동합니다

참고! 재료 아이콘은 또한 구글 글꼴에 당신이 @ 각도/CLI 프로젝트를 진행하고 있기 때문에 (로컬 버전 필요)

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

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