人気テーマOriginでフォント指定する方法を紹介します。フォントサイズについてもまとめてみました。
Origin最新版はこちら
フォントを変更できない理由
フォントの変更は、通常であればテーマファイル群の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 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif !important; /* 13 / 16 = 0.8125; 22 / 13 = 1.692307 */フォントサイズの指定
まず初めの1emは、フォントサイズの指定です。
元は0.8125emとなっていますが、これは行末のコメントにある通り、サイト全体のデフォルトを16pxとした際に、フォントサイズを13pxにするために割り算をした結果の数値です。
次の1.65は、所謂なんちゃって黄金比な数値です。この計算式も行末のコメントに記述してあります。
フォントファミリーの指定
次の記述が、font-familyに該当する部分です。
フォント名は先に書いてある方が優先順位が高く、欧文は「Helvetica NeueがなければArial」、日本語は「ヒラギノ角ゴシックProNがなければメイリオ」、「どれもなければシステムのゴシック体フォント」という指定になっています。
すでにあるフォント指定の上書き
重要なのが、最後の!importantです。
これを記述した行は、CSS内の他の部分で「被る」指定があったとしても優先（上書き）されます。
りゅう!importantをさらに上書きする方法もありますが、ここでは説明を省きます。
Originテーマではstyle.cssとは別の部分でフォントを指定しており、それは管理画面の「外観」→「カスタマイズ」→「CUSTOM CSS」で変更することを前提としています。
しかしstyle.cssでスタイルのすべてを制御したいと思うのはデザイナーの性です。ていうかわかりにくいですし。
ここで紹介した方法なら、style.cssでフォントを含めすべてを制御できます。