人気テーマOriginでフォント指定する方法を紹介します。フォントサイズについてもまとめてみました。

Origin最新版はこちら

フォントを変更できない理由

フォントの変更は、通常であればテーマファイル群のstyle.cssで指定すればOKです。

しかしこのOriginというテーマは、そこに至るまでに少々手間がかかるというだけです。

素直にstyle.cssでフォントを変更できない理由は以下のとおりです。

1. テーマのカスタマイズで指定するのが基本になっている
2. 優先して読み込まれる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でフォントを含めすべてを制御できます。