ブログの雰囲気や読みやすさを大きく左右するのが「フォント」です。WordPressテーマSWELLには、初心者でも簡単にフォントを変更できる機能が備わっており、ちょっと設定を変えるだけでサイト全体の印象をガラッと変えることができます。
またSWELLのデフォルトで備わっている以外のフォントも設定することが可能です。この記事では、SWELLでフォントを変更する基本的な手順をわかりやすく解説します。自分のブログに合ったフォントを見つけて、カスタマイズしてみましょう！
SWELLのデフォルトで入っているフォントの場所はここ！
SWELLには初めからデフォルトで4つのフォントが準備されています。WordPressの管理画面のサイドバーにある、
外観>カスタマイズをクリックします。
次にサイト全体設定をクリック。
基本デザインをクリック。
スクロールするとベースとなるフォントという場所があるので、そこから選択することができます。
デフォルトであるフォントは、
- 游ゴシック
- ヒラギノゴシック>メイリオ
- Noto Sans JP
- 明朝体（Noto Serif JP）
の4つです。日本語サイトではNoto Sans JPがよく使用される傾向にあります。
デフォルト以外のフォントを使用したい場合
SWELLではデフォルトで4つのフォントが準備されていますが、もっと違うおしゃれなフォントを使用したいと思う方もいると思います。その場合は以下のような手順で設定することができます。
1.GoogleFontsを開く
こちらのURL（https://fonts.google.com/）を開き、GoogleFontsにアクセスします。
2.指定したいフォントを検索する
次に検索バーの箇所で指定したいフォントを検索します。因みにこのブログで使用しているフォントは「Zen Maru Gothic」になります。その後に青いボタン「Get font」をクリックしましょう。
Zen Maru Gothicは丸みがあるフォントで親しみやすく個人的には好きなフォントなのでおすすめです！
3.Get embed codeのボタンをクリック
4.右側にある「Copy code」でコードをコピーする
次に上段のEmbed code in the <head> of your htmlのコードをコピーします。Copy codeと書かれている場所をクリックするとコピーができます。左側にあるLight300、Regular400などは文字の太さを表しています。取得したい文字の太さにチェックを入れましょう。
5.GoogleFontsのコードを高度な設定></head>内に貼り付ける
先ほどのGoogleFontsサイトでコピーしたコードを以下の場所に貼り付けます。
WordPressの管理画面のサイドバーの外観>カスタマイズ>高度な設定をクリック。
</head>の直前という箇所にコピーしたコードを貼り付けます。
6.追加CSS内にコピーしたCSSを貼り付ける
次にGoogleFonfs内の下段にあるCSSを貼り付けていきます。たくさんCSSがありますが、個人的にはfont-weight:400;のコードが良いかと思います。こちらをコピーします。
font-weightは文字の太さを制御するCSSになります。400は普通より少し細いタイプのCSSです。数字が大きくなると文字が太くなります。個人の好みに合わせて選択しましょう。
WordPressの管理画面に戻っていただき、先ほどの高度な設定より下にある「追加CSS」の箇所をクリックします。
GoogleFontでコピーしたCSSをこちらに貼り付けて公開ボタンをクリックしましょう。
7.サイトのフォントが変化したかチェックする
うまくいっていれば、サイト内の文字が変化したかと思います！お疲れ様でした！
好みのフォントを自身のサイトやブログに反映してみよう！
いかがでしたか？SWELLでは特別な知識がなくても、管理画面から簡単にフォントを変更することができます。フォントが違うだけで、ブログやサイト全体の雰囲気がぐっと変わりますよ！
