【Wordpress】ブログの文字フォント変更方法♪プラグインなし！コピペで簡単！

ブロガーの皆さん、こんにちは！
kou(@kou_souda)です。

WordPressでブログ運営されている方は、毎日どんなことを書こうか考えたり、とにかく記事の更新に次ぐ更新の日々だと思いますが、たまにはカスタマイズも楽しんでいますか？

記事ネタに行き詰まったら、少し気分転換にブログをカスタマイズしてみることをおすすめします♪

そこで今回は、Wordpressの文字フォントを変える方法をお伝えします◎
実は僕の彼女もブログをしていて、フォントを可愛くしたら喜んでくれました。

わーいわーい！！！
可愛くしてくれた😊💓

こう天才優男できる奴ステキなやつ！！！！！！
るんるん♪ pic.twitter.com/0inIdGOLm8

— haru(^^)SMILE WATCH☀️ (@SMILEWATCH1) November 1, 2018

（wordpress有料テーマ「SANGO」で上のようなカテゴリメニューえお作る方法⬇︎）
関連記事:
SANGOでアイコンのアニメーション機能を追加しよう！見出しや記事中にも使える！
【WordPress】SANGOを簡単カスタマイズ！おすすめデザインご紹介♪

wordpressの文字フォントを変えるのは、正直初心者にとってはハードルが高いことだと思います。
かわいい文字に変えたいと思って調べてみたけど、ファイルのアップロードやコードの貼り付けとか、なんだか難しそう…
と思って諦めてしまった方も少なくないと思います。

でも大丈夫！

この記事をちゃんと読んでいただければ誰でもできる内容となっておりますので、是非参考にしてブログを可愛くしてみてください♪

本日のメニューはこんな感じ◎

おすすめフォントの紹介
ブログの文字フォント変更の為の準備
ブログ内全ての文字フォントを変更する方法
記事内の見出し(h2タグ)の文字フォントのみを変更する方法
SANGOのメニューのフォントを変える方法

さっと読みたい方

ブログに適しているおすすめフォント3選！
ブログの文字フォント変更の為の準備
このコードをCSSに貼り付けて！

ブログに適しているおすすめフォント3選！

既に使いたいフォントが決まっている方は、次のステップ、ブログの文字フォント変更の為の準備までジャンピングしちゃってください。

前提として、web上のフォントはほぼほぼGoogle fontsかfont familyに登録されているものとなります。
僕も詳しくはわからないのですが、とりあえずいろいろ検索してみて自分の好みのフォントを探すことが重要です（笑）

とはいえ、なかなかお気に入りを見つけ出すのも一苦労だと思うので、僕が3つだけおすすめフォントをご紹介しますね♪

あずきフォント

http://fontfree.me

ダウンロードはこちらのページ下部より。

フロップデザイン

https://www.flopdesign.com

女性アフィリエイターとして有名なルカさんもこのフォントを使われていますね！

まるっこくて可愛いです。

ダウンロードはこちらのページ中部より。

しねきゃぷしょん

http://fontfree.me

これは実際に僕が以前使っていたフォント（笑）
映画風の文字がキャッチーです！

ダウンロードはこちらのページ中部より。

注意

上記の3つのフォントは全て商用OKですが、フォントの種類によっては個人利用しかできないものや、macとwindowsの片方でしか使えないもの、漢字対応していないもの等それぞれなので、ダウンロードする前に必ず確認しよう！
(例)

ブログの文字フォント変更の為の準備

さて、ここからは若干面倒なので集中していきますよ！
流れとしては、

お気に入りのフォントをPCにダウンロード➡︎.ttfファイルを.woffファイルに変換➡︎.woffファイルをサーバーにアップロード➡︎wordpressのスタイルCSSにコード貼り付け

という流れになります。

…なんのこっちゃですよね（笑）

一つずつ片付けていきましょう！

①任意のフォントをダウンロード

お気に入りのフォントをダウンロードページからダウンロードしましょう。
フロップデザインを例に挙げると、こちらを押すとフォントのフォルダがダウンロードされます。

フォルダのどっかに、「〜.ttf」というファイルが必ずあるので探しましょう。

②「ttf」を「woff」に変換！

なんぞやって感じですが、1分で終わります。

convertioという無料で変換できるサイトがあるので、そちらにアクセスしまして、この画面にそのまま先ほどの「.ttf」ファイルをドラッグします。

するとこうなりますので、変換先を「woff」にします。

そしたら下の「変換」をクリック！

変換中となった後、ダウンロードと緑で表示されるので、それをクリックします。

これで無事、woffファイルのダウンロードが完了しました！

③woffファイルをFTPソフトを使ってサーバーにアップ

これまた難しそうな響きですが大丈夫です（笑）

フォントをPCにダウンロードをしただけではもちろんダメで、それをwordpress上で表示させるためには、wordpressのサーバーにポイっと投げてあげなければなりません。

僕はエックスサーバーを使っていますが、ロリポップ！
やさくらも基本的にやり方はかわりません！

まずは契約しているサーバー会社の管理画面にログインし、FTPソフトの管理画面にいきます。
恐らくエックスサーバーを使っている方が多いと思うので、例に挙げると、

ますはサーバーパネルにログイン。

「FTPアカウント設定」をクリック。
（FTPアカウントに初めてアクセスする場合は何か登録手続きがあったかも）

その後は

ドメイン➡︎public.html➡︎wp-content➡︎themes➡︎現在使っているテーマの子テーマ

の順番です！

テーマの子テーマまでいったら、先ほど作ったwoffファイルをアップロードします。

お疲れ様です、これで準備は終わりました♪

あとは以下のコードをスタイルCSSにコピペするだけなので楽チンです。

このコードをCSSに貼り付けて！

以下のコードは、先ほどサーバーにアップロードしたフォントを呼び出すためのコードです。
なので、ブログ内のフォント全部も変えようとしている方も、見出しだけ変えたいという方も、このコードをCSSに貼り付ける必要があります！

/*新フォントを呼び出す 始め*/
@font-face{
font-family:flopdesign;
src:url('FLOPDesignFont.woff')format('woff');
}
/*新フォントを呼び出す 終わり*/

/*新フォントを呼び出す始め*/

@font-face{

font-family:flopdesign;

src:url('FLOPDesignFont.woff')format('woff');

}

/*新フォントを呼び出す終わり*/

flopdesignは任意の英文字列で、FLOPDesignFont.woffは先ほどサーバーにアップしたファイル名をそのまま入力します◎

注意

・wordpressのダッシュボード➡︎外観➡︎テーマの編集➡︎子テーマのCSS
・サーバーのFTPアカウントから子テーマのCSSを編集
どちらの場合でも大丈夫ですが、コードのコピペを行う前に必ずバックアップをするようお願い致します。

ブログ内全ての文字フォントを変更するコード

ここからは人によって異なります。

まず、ブログ内のフォント全てを一括で変えてしまいたい人！
個人的にはこっちの方が統一感もあるし楽だしおすすめです◎

/*新フォントをブログ全体に適用 始め*/
body {
font-family:flopdesign,YuGothic,'游ゴシック',
'Hiragino Kaku Gothic ProN',
Meiryo, '游ゴシック', sans-serif;
}
/*新フォントをブログ全体に適用 終わり*/

/*新フォントをブログ全体に適用始め*/

body {

font-family:flopdesign,YuGothic,'游ゴシック',

'Hiragino Kaku Gothic ProN',

Meiryo, '游ゴシック', sans-serif;

}

/*新フォントをブログ全体に適用終わり*/

上記のコードの、flopdesignのところは、必ず1番目のコードの任意英文字列と一致させること！

これでブログ全体のフォントが変わります。
変わらない場合は、まずコードを確認して「,」や「’」を消してしまっていないか確認すること！
そして何度かリロードしてみたりcookieをオフにしてみること！

記事内の見出し(h2タグ)の文字のみを変更するコード

もうあとは基本一緒です！
上のコードのbodyをh2に変えることで、新フォントを見出しのみに適用することができます。

/*新フォントを見出しのみに適用 始め*/
h2 {
font-family:flopdesign,YuGothic,'游ゴシック',
'Hiragino Kaku Gothic ProN',
Meiryo, '游ゴシック', sans-serif;
}
/*新フォントを見出しのみに適用 終わり*/

/*新フォントを見出しのみに適用始め*/

h2 {

font-family:flopdesign,YuGothic,'游ゴシック',

'Hiragino Kaku Gothic ProN',

Meiryo, '游ゴシック', sans-serif;

}

/*新フォントを見出しのみに適用終わり*/

使っているテーマによっては、トップページやサイドバーのメニューにもh2が使われていることがあるので、確認が必要です。

SANGOのメニューの文字フォントだけを変更するコード

僕は割とSANGOを愛用しているので一応書いておきます！

/*SANGOのメニューのフォント変更 始め*/
.dfont {
font-family:flopdesign,YuGothic,'游ゴシック',
'Hiragino Kaku Gothic ProN',
Meiryo, '游ゴシック', sans-serif;
}
/*SANGOのメニューのフォント変更 終わり*/

/*SANGOのメニューのフォント変更始め*/

.dfont {

font-family:flopdesign,YuGothic,'游ゴシック',

'Hiragino Kaku Gothic ProN',

Meiryo, '游ゴシック', sans-serif;

}

/*SANGOのメニューのフォント変更終わり*/

以上で本日のメニューは終了となります！
お気に入りのフォントにすることはできましたでしょうか？^^

もしコード編集後に、スマホで確認してみたら画面が真っしろしろ！なんてことになったら、落ち着いて、貼り付けたコードを削除して保存し直してくださいね（笑）

僕も気が向いたらまたフォントを変えてみようかな〜なんて思っています！