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, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
@base-heading-font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, "MS Pゴシック", "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
以上、おしまい。
関連記事