WordPress Twenty Twelve テーマのフォントの設定を変更する

当Webサイトも、「 Twenty Twelve 」のテーマを使用しております。

「このテーマかっこいい」と思っても、テーマは海外で作られていることが多いので、ベースのフォントも英語ベースのフォント設定になっているので、実際にテーマを有効にしてみるとフォントのバランスが悪かったりすることが殆どなので、フォントを変更してみます。

Twenty Twelveのデフォルトのフォント

スクリーンショット_2013_04_04_9_59-2

写真は、Twenty Twelveのテーマをインストールし、有効にした際のデフォルト状態のフォントです。

fontの設定は、テーマフォルダの中「 style.css 」ファイルで行います。484行目付近の「style.css」をみるとベースフォントは、「Helvetica, Arial, sans-serif 」だとわかります。

 484 body {
 485         font-size: 14px;
 486         font-size: 1rem;
 487         font-family: Helvetica, Arial, sans-serif;
 488         text-rendering: optimizeLegibility;
 489         color: #444;
 490 }

フォントの変更方法

好きなフォントを「 font-family: 」の所に記述しましょう。当Webサイトでは以下のように「 font family: 」を設定しています。

body {
        font-size: 14px;
        font-size: 1rem;
        font-family: HiraMaruProN-W4, 'ヒラギノ丸ゴ ProN W4', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', 'MS Pゴシック', MS PGothic, sans-serif;
        text-rendering: optimizeLegibility;
        color: #444;
}

スクリーンショット_2013_04_04_16_37

 font-familyの優先度

font-familyは、一番最初に記述されているフォントが優先度が一番高くなります。閲覧するPC上にフォントがインストールされていれば、ブラウザ上に表示されます。フォントがインストールされていなければ、次のフォントで表示をする。という動きになります。区切り文字は、「,」になります。

OS環境によりますが、ヒラギノフォントが一番優先度高い設定となっています。殆どのWindows環境であれば、ヒラギノフォントはデフォルトではインストールされていない為「 meiryo 」になり、Macでは、ヒラギノフォントで表示されるという想定になります。また、OSによって振り分ける方法もあります。

Windows,Macユーザを比較すると圧倒的に、「 meiryo 」を優先するところですが、Macではヒラギノフォントのほうがより綺麗にみえる為、ヒラギノを最優先としています。

この記事が気に入ったら
いいね ! しよう

Twitter でin44y

最新の関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です