WordPressで日本語フォントを変更するのは簡単3ステップ

なんちゃってSE歴12年
けいいち@なんちゃってLifeコーチです。

このブログってフォント変更どうやってるの？

このブログでも、フォントを変更してます。
手順は3ステップだから、とっても簡単！
初心者にもおすすめです。

1. Google日本語フォントを選ぶ
2. WordPressのcssに書き込む
3. リロードする

どうしても使いたいフォントがある場合は
フォントファイルをダウンロードしてー
コンバートしてー
アップロードしてー
cssに書き込みましょう。

こちらのサイトがおすすめです。

参照サイト:ルカルカアフェリエイト

Google Fonts+日本語早期アクセスからフォントを選ぶ

Google Fonts + 日本語早期アクセスで
9種類の中から好みのフォントを選びます。

参照サイト:Google Fonts + 日本語早期アクセス

このブログでは、さわらびゴシックを使っています。

URLをコピーしてcssを編集する

フォントを読み込んで変更するようにcssを編集します。

好みの日本語フォントのURLをコピーします。

https://～.cssまでをコピーするんだよ。

URLとStyleをコピーするならここがおすすめです。

参照サイト:think-web

WordPressのダッシュボードの左メニューで
【外観】→【テーマ】を選択します。

コピーしたURLを書き込みます。
さわらびゴシックなら下のように書きます。

https://～.cssまでを書き換えてね。

@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);

次にブログ全体にフォントが適用されるように
body～を書き込みます。

このブログでは、下のように指定しています。

「Sawarabi Gothic」の部分は使用するフォントに
合わせて変更してください。

body {
font-family: 'Sawarabi Gothic', sans-serif;
font-size: 100%;
font-weight:350;
letter-spacing: 0.1em;
}

続けて書くとこんな感じ。

/* フォント変更 */
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);

body {
font-family: 'Sawarabi Gothic', sans-serif;
font-size: 100%;
font-weight:350;
letter-spacing: 0.1em;
}

【ファイルの更新】をクリックしたら作業完了！

リロードしてみよう！

cssの変更が完了したらブログに戻ってリロードしてみよう！

見事にフォントが変更されれば成功です。

おすすめのWordPressテーマ

このブログでは「OPENCAGE（オープンケージ）」の
WordPressテーマ「ストーク」を使っています。

有料テーマを買ってしまうのがオススメです。

有料テーマの中でも、STORKがオススメ！
10,800円の買い切りなのに機能がいっぱいついているので
初心者ブロガーでもプロっぽく見えちゃいます。