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のダッシュボードの左メニューで
【外観】→【テーマ】を選択します。

補足
子テーマのcssを変更するようにしましょう。

コピーした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円の買い切りなのに機能がいっぱいついているので
初心者ブロガーでもプロっぽく見えちゃいます。


スポンサーリンク