シンプルで多機能な良質テーマとして人気のある Origin ですが、style.css でのフォント指定ができないという声をたまに聞きます。
またフォントサイズの指定についてもよくわからないという方がいらっしゃるようですので、まとめてみることにしました。
フォントを変更できない理由
フォントの変更は、通常であればテーマファイル群の style.css で指定すれば OK です。
しかしこの Origin というテーマは、そこに至るまでに少々手間がかかるというだけです。
素直に style.css でフォントを変更できない理由は以下のとおりです。
- テーマのカスタマイズで指定するのが基本になっている
- 優先して読み込まれる
style.min.cssが存在する
まず 1 はさほど問題ではありません。style.css 側でどうにでもやり方があります。
問題の 2 は、読み込みを少しでも早くするためでしょうが、style.css がそもそもそれほど大きくないテキストファイルのため、圧縮する必要性を感じられません。
style.min.cssを削除しましょう
元の style.css が残っている以上、カスタマイズをするうえで邪魔な存在でしかありません。
削除しても問題ないファイルですので、削除してしまいましょう。
これで style.css の記述が生かせるようになりました。
!importantに頼りましょう
スタイルシートをいじる人にはお馴染みの手法です。 「!important」 を最後に付けることにより、他の場所で異なる指定がされていても、こちらの記述が優先ですよーということになります。
さっそく変更してみる
フォント名に日本語表記を使うのであれば、まずはこれが必須です。一番上のコメントブロック直下にでも記述しましょう。
@charset 'UTF-8';
記述後は、忘れずにテキストエディタの機能を使い、文字コードをUTF-8(BOM無)で保存しなおしておきましょう。
次は全体のフォントを変更してみます。
テーマのバージョンにもよりますが、だいたい33行目あたりに以下の部分があると重います。
font: 0.8125em/1.692307em 'Bitter', Georgia, 'Times New Roman', Times, serif; /* 13 / 16 = 0.8125; 22 / 13 = 1.692307 */
この 「font」 行がフォントの指定をしいている部分です。font-size, line-height, font-family を1行で指定しています。
これを以下のように変更してみます。
font: 1em/1.65 Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif !important; /* 13 / 16 = 0.8125; 22 / 13 = 1.692307 */
まず初めの 「1em」 は、フォントサイズの指定です。
元は 「0.8125em」 となっていますが、これは行末のコメントにある通り、サイト全体のデフォルトを 16px とした際に、フォントサイズを 13px にするために割り算をした結果の数値です。
次の 1.65 は、所謂なんちゃって黄金比な数値です。この計算式も行末のコメントに記述してあります。
いよいよフォントを変更してみる
次の記述が、font-family に該当する部分です。
ここでは、最初に欧文フォントの Arial を記述することで、「日本語部分は日本語フォントで、英字は （あれば） Arial で」 という指定にしています。
次に 「ヒラギノ角ゴシック」 という Mac で標準となっているフォントをインストールしてあれば、日本語はそれで表示するようになっています。
Windows でおなじみ 「メイリオ」 はその後に出てきます。優先順位として、「ヒラギノ角ゴシックがなければ （仕方なく） メイリオで表示」 という仕組みです。
次に出てくる 「sans-serif」 は、「ゴシック体」 という意味になります。上記 2 書体が存在しない場合、フォントを明朝体にはしたくないのでこのように記述します。まあおまじないと思っておけば大丈夫です。
そして最重要なのが、最後の 「!important」 です。
これを記述した行は、他の部分で 「かぶる」 指定があったとしても優先されます。
「Origin」 テーマでは、style.css とは別の部分でフォントを指定しており、それは管理画面の 「外観」 → 「カスタマイズ」 → 「CUSTOM CSS」 で変更することを前提としています。
しかし `style.css｀ でスタイルのすべてを制御したいと思うのはデザイナーの性です。ていうかわかりにくいですし。
この方法なら、style.css でフォントを含めすべてを制御できます。
こちらの記事もあわせてどうぞ
