CSS
フォント
ionic
アスキーアート

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

Ionicでカスタムフォントを使う時は、CSSで@font-faceを指定すれば良いです。

やり方

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ビューアー