[Ionic]カスタムフォント(独自フォント)を使う

Ionicでカスタムフォントを使う時は、CSSで@font-faceを指定すれば良いです。
今回使うカスタムフォントはAAを表示するためのフォント(aahubフォント)です。

やり方

app.scssに@font-faceを記述します。
それだけすれば、カスタムフォントをfont-familyで指定できるようになります。
ソースコードは以下。

src/app/app.scss

@font-face {
        font-family: 'aahub';
        src: url("../assets/fonts/aahub");
    }

ソースコード

src/pages/custom-font/custom-font.scss

    .aa{
        font-family: 'aahub';
    }

<ion-header>
  <ion-navbar>
    <ion-title>custom-font</ion-title>
  </ion-navbar>

</ion-header>
<ion-content padding>
  <p>フォント：デフォルト</p>
  <div>
    　 ∧＿∧<br>
    　（　´∀｀）<br>
    　（　　　　）<br>
    　｜ ｜　|<br>
    　（_＿）＿）<br>
  </div>
  <p>フォント：カスタム</p>
  <div class="aa">
    　 ∧＿∧<br>
    　（　´∀｀）<br>
    　（　　　　）<br>
    　｜ ｜　|<br>
    　（_＿）＿）<br>
  </div>
</ion-content>

※ aahubは今回作成した独自フォントの名前です。コピペする時は書き換えて貰えれば・・・。

ソースコード

上記の設定を行うだけでカスタムフォントの指定はできます。簡単です。

結果、以下のように表示されます。
カスタムフォントではアスキーアートがずれなく表示できています。

デモ

全体に適用する場合

アプリ全体のフォントを変更する場合は、variables.scssに以下を追加すればよいです。

src/app/app.scss

@font-face {
        font-family: 'aahub';
        src: url("../assets/fonts/aahub");
    }

src/theme/variables.scss

$font-family-md-base: "aahub";
$font-family-ios-base: "aahub";
$font-family-wp-base: "aahub";

IonicのCSS上書きについては公式ドキュメントを見てもらえれば
公式ドキュメント

まとめ

Ionicでは一般的なWEBフォントと同じように使用できるので簡単です。私も自身のWebサイトで使用していますので、参考までに・・・。
スマホ対応のAAビューアー

また、その他AA表示用フォントを知りたい方は以下のサイトも参考にしてみてくdさい。
AAHub Fonts