サイト全体のベースとなるフォントの設定方法【font-family設定】

サイト全体のベースとなるフォントの設定方法【font-family設定】
記事上のウィジェットエリア

このページでは、WordPressテーマ「SWELL」でのフォントの設定方法について解説していきます。(ver1.2.1から設定可能になりました)

「外観」>「カスタマイズ」から>「デザイン・レイアウト」の項目を選択して下さい。

デザイン・レイアウト設定
デザイン・レイアウト設定

カスタマイザーの基本的な使い方についてはこちらを参考にしてください。

この「デザイン・レイアウト」メニューの中に、以下のような設定エリアがあるかと思います。

フォントの設定エリア
フォントの設定エリア
了

このように、4タイプからフォントを設定することが可能です。

目次前広告表示エリア
目次

游ゴシックを設定した場合

標準ではこの「游ゴシック」が設定されています。

MacでもWindowsでも「游ゴシック」がベースで、もし游ゴシックがなければMacでは「ヒラギノ」、Windowsで「メイリオ」になるような設定です。

実際に適用されるCSSコード

body{
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo",sans-serif;
  font-weight: 500;
}

ヒラギノ(>メイリオ)を設定した場合

ヒラギノ角ゴシックを最優先とする設定。

MacやiPhoneでは「ヒラギノ」、Windowsでは「メイリオ+英字はSegoe UI」です。

実際に適用されるCSSコード

body{
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Segoe UI", "メイリオ", "Meiryo",sans-serif;
}

Noto Sans JPを設定した場合

Google Fontsから「Noto Sans JP」を使用する設定です。

デバイスに左右されずに同じフォントを使用したい人向け。

実際に適用されるCSSコード

body{
  font-family: "Noto Sans JP", sans-serif;
}

明朝体を設定した場合

明朝体も1パターンだけ用意しました。

ヒラギノ明朝があればヒラギノ明朝を優先し、その他のデバイスではGoogle Fontsから「Noto Serif JP」を使用します。

実際に適用されるCSSコード

body{
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "Noto Serif JP", serif;
}

Androidでは明朝体がインストールされていない機器が多い&Windowsで他の明朝体が読みにくいので、ヒラギノがないデバイスでは全てNoto Serifにしています。(ヒラギノが優先なのは私の好みです…)

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次