LoginSignup
7
2

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-01-07

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

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2