角度のあるアプリケーションへのフォントのインポート

Question

フォント「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

私はそれを理解しました。

私はこのようなGoogleのフォントからのインポート：私はそれを使用したいフォントの太さが仕事を始めたCSSを伝えることで

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

二つの異なる重みを含み、500と700 を。

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

Answer 2

これは、そのURLがどのように見えるかあるのです。

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

あなたがコンテンツ内local(...)節を見れば、あなたは各font-weight S（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; 
}