【Ionic】カスタムフォントを使用する方法

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アプリ開発編
Javascript
スポンサーリンク

コメント