UIkitのカスタマイズ　font-familyを変更する

前回で最終回にしようと思ったのですが、 カスタムテーマのフォントの設定を変更してみましたのでご紹介したいと思います。

特段難しい点はなく、カスタムテーマの方に変数を追加するだけです。

まずは変更箇所を特定する

変更する箇所を探すのが今回の一番の「難所」でしょうか。（全く難所ではないですね・・・）

私はエディタにAtomを使用していますので、エディタの検索機能を利用してfont-familyという キーワードを利用している箇所を探しました。

最終的には以下の変数を変更することにしました。

  • @base-body-font-family - body要素で使用される文字
  • @base-heading-font-family - ヘッディング(h1, h2, h3など)で使用される文字
  • @navbar-nav-font-family - ナビゲーションバーで使用される文字

上の2つは/src/less/core/base.lessに、 @navbar-nav-font-family は /src/less/core/navbar.lessに定義されていました。

カスタムテーマの変更

@base-body-font-family, @base-heading-font-familyの2つは/custom/THEME-NAME/variables.lessに追加します。

@base-body-font-family:  "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;

@base-heading-font-family:  "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;

ご覧のとおり、メイリオとヒラギノゴシックなどを追加しました。

@navbar-nav-font-family は /custom/THEME-NAME/navbar.lessに追加します。

@navbar-nav-font-family: @base-body-font-family;

ナビゲーションバーだから特別なフォントを使用するというわけでもないので、値の方は@base-body-font-familyを設定しました。

ビルド

いつものgulpでビルドを実行します。

$ gulp dist -t THEME-NAME

以上、おしまい。

関連記事