如何在Ionic2 RC0/RC1上使用Google字體？

Question

在我app.scss我把：@import '../theme/variables';

，並在我的variables.scss我把：

@import "ionic.globals"; 
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro); 
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300); 

但是字體不加載（我檢查網絡流量）。

任何想法如何做到這一點？甚至可能離線？

Answer 1

工作液

根本原因是，我用.ttf而不是二進制.woff文件。

主題/ variables.scss

@font-face { 
    font-family: 'Source Sans Pro'; 
    src: url('../assets/fonts/SourceSansPro-Regular.woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Oswald'; 
    src: url('../assets/fonts/Oswald-Regular.woff'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 2

這是離線方法。

將字體/文件夾移動到www /文件夾中，所以它看起來像這樣。

| scss/ 
    |-- basics/ 
    |--_fonts.scss 
| www 
    |-- fonts/ 
    |-- SourceSansPro-ExtraLight.ttf 
    |-- SourceSansPro-Bold.ttf 

然後，如果您未縮小資源，則路徑可能會關閉一個級別。這應該修復參考。

@font-face { 
    font-family: 'Source Sans Pro', sans-serif; 
    src: url('../fonts/SourceSansPro-ExtraLight.ttf'); 
} 

@font-face { 
    font-family: 'Source Sans Pro', sans-serif; 
    src: url('../fonts/SourceSansPro-Bold.ttf'); 
}