각도가있는 응용 프로그램으로 글꼴 가져 오기

Question

Font "Montserrat"를 Angular4 프로젝트로 가져 오려고하는데 단순히 표준으로 재설정됩니다.

은 여기 내있는 style.css

@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700"); 

.fancyFont { 
    font-family: 'Montserrat'; 
} 

그리고 내 friend.component.html

<p class="fancyFont">Look at my Fanciness</p> 

Answer 1

알아 냈습니다.

나는이 같은 구글 글꼴에서 수입 :

나는 그것이 작동하기 시작 사용하고자 글꼴 무게는 CSS를 이야기함으로써 두 개의 서로 다른 무게, 500 및 700 을 포함

@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700"); 

.

.fancyFont { 
    font-family: 'Montserrat'; 
    font-weight: 500; 
} 

Answer 2

이 해당 URL이 같은 모습입니다이다. 이 컨텐츠 내에서 local(...) 섹션을 보면

/* vietnamese */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 500; 
    src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCweiyNCiQPWMSUbZmR9GEZ2io.woff2) format('woff2'); 
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 
} 
/* latin-ext */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 500; 
    src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCwevfgCb1svrO3-Ym-Rpjvnho.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 
/* latin */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 500; 
    src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCweteM9fzAXBk846EtUMhet0E.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 
} 
/* vietnamese */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcnv4bDVR720piddN5sbmjzs.woff2) format('woff2'); 
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 
} 
/* latin-ext */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcjrEaqfC9P2pvLXik1Kbr9s.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 
/* latin */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcmaVI6zN22yiurzcBKxPjFE.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 
} 

, 당신은 현재 각 font-weight의 (500 & 700)에 대한 특정 font-family 이름이있다 볼 수 있습니다. 따라서 일반적으로 , 'Montserrat-Medium' 또는 'Montserrat-Bold'과 같이 전화하는 대신 font-family 이름을 지정하십시오. 문제가 해결되는지 확인하십시오.

Answer 3

다음은 글꼴이 scss 파일에 글꼴을 추가하는 방법입니다. 어쩌면 이런 식으로 고려해야 할 것입니다.

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}'); 
    src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), 
    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), 
    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), 
    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), 
    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); 
// src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 
    font-weight: normal; 
    font-style: normal; 
}