Ionicでカスタムフォントを使用する方法についてまとめました。
【Ionic入門】カスタムフォントを使用
Ionicでアプリを作成するときにカスタムフォント(.ttf)を使いたい場合があります。
その手順は次のとおりです。
① カスタムフォントのファイル(ttf形式)を用意します。
② 用意したttfファイルを「src/assets/fonts」内に保存します。
– | 補足 |
---|---|
1 | fontsフォルダは自分で作成(わかりやすくするため) |
2 | fontsフォルダ内のttfファイルは、ビルド時に「www/assets」内に自動でコピーされる(後にSCSSで呼び出すときのパスが.https://raw.githubusercontent.com/nishizumi-lab/sample/master/algorithm/electricity/denken/riron/fonts/〇〇.ttfで済む) |
③ scssファイルで保存したフォントを呼び出すことができます。
※MaruGoAA-SR.ttfの場合
@font-face { font-family: 'MaruGoAA-SR'; /* */ src: url('.https://raw.githubusercontent.com/nishizumi-lab/sample/master/algorithm/electricity/denken/riron/fonts/MaruGoAA-SR.ttf'); } page-home { ion-title, ion-card-header { font-family: 'MaruGoAA-SR'; } }
– | 関連記事 |
---|---|
1 | ■【Ionic入門】Androidアプリ開発編 |
コメント