好きな箇所に好きなWebフォントでテキストを表示しよう

DigiPressは、テーマファイルを直接編集することなくHTMLのヘッダ(head)に独自のmetaタグやlinkタグなどheadタグ内に記述したい定義をいつでも追加することができます。

このHTMLヘッダー設定とオリジナルスタイルシート設定を利用して、好きなWebフォントを読み込んでサイトの任意の箇所に反映させることができます。

ここでは、無料で大量のWebフォントを拝借できる Googleフォントから任意のWebフォントを選んでテーマに反映させる方法をご紹介します。

INDEX

Googleフォントからフォントを選ぶ

Googleフォントにアクセスして利用したいフォントを選びます。
好みのフォントから、Webページに反映したいものだけを選び、右上のをクリックして追加します。

注意

ページ表示速度に影響するため、読み込むWebフォントは1つだけに絞り込むことを推奨します。

Googleフォントで提供されているフォントの種類は膨大にあるため、右側のメニューから好みに合わせてフォントのタイプや言語を絞り込んで効率的に必要なフォントのみを表示して選ぶことも出来ます。

書体の厚さ(Thickness)や斜体具合(Slant)、対象フォントに含まれるスタイルの数(Number of styles)、幅を指定してさらに絞り込むこともできます。

ページ下部にフォントファミリーが選択されていることを示すバーがあります。これをクリックして開きます。

「CUSTOMIZE」タブを開き、対象フォントがサポートするフォントのスタイルから必要なものだけをチェックします。

“Load Time“　は「Fast」→「Moderate」→「Slow」の順にフォントサイズが重くなるため、チェックするものは必ず必要なスタイルのみに限定しましょう。

「EMBED」タブを開き、”Embed Font“に表示されているリンクタグをコピーします。

“Specify in CSS“に表示されているフォントファミリー名が、後に「オリジナルスタイルシート設定」に追記するfont-familyの値となるため、これも控えておきましょう。

コピーしたリンクタグをDigiPressテーマのHTMLヘッダーに出力させます。

テーマカスタマイザー対応のテーマ(fresco以降)の場合: [外観] → [カスタマイズ] よりカスタマイザーを開き、[headセクション／メタタグ設定] → [headセクション内の独自コード(PC)] および [headセクション内の独自コード(モバイル)] にリンクタグをペーストします。
DigiPress専用テーマオプション画面(Luminous以前)の場合: [詳細設定] → [HTMLヘッダー設定] の “<head>～</head>内のユーザー定義” にリンクタグをペーストして「保存」します。

テーマカスタマイザー対応のテーマ(fresco以降)の場合: [外観] → [カスタマイズ] よりカスタマイザーを開き、[オリジナルCSS設定] にアクセスして、Webフォントを反映させたい箇所についてのCSSを追記します。
DigiPress専用テーマオプション画面(Luminous以前)の場合: DigiPressメニューの[ビジュアル設定]→[オリジナルスタイルシート設定]に移り、Webフォントを反映させたい箇所についてのCSSを追記します。

反映箇所を指定する場合の設定例を以下に示します。

body {
  font-family: [ここに控えたWebフォント名を入力], Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Meiryo,'メイリオ','ＭＳ Ｐゴシック',sans-serif;
}

.entry {
  font-family: [ここに控えたWebフォント名を入力];
}

その他、フォントを反映させる対象要素を確認するには、以下をご参照ください。