【WordPress】フォント変更のやり方:サイトの印象を変えよう!

フォント変更
WordPressで文字フォントを変更するには、どうすればいいの?

現在利用しているWordPressテーマのデフォルトの文字フォントでは、なんだか味気なく、読みづらいと思われる方も多いのではないでしょうか。

サイトに合ったフォントを使いたい
文字を読みやすくしたい
個性的なフォントを使ってみたい

こういった方にWordPressでの「フォントの変更のやり方」を初心者の方でもわかりやすくご説明します。

フォントを変えるだけで、WEBサイトの印象もガラッと変わるので、是非試してみてくださいね。

ぶろぐ先生
フォントでサイトの雰囲気が決まると言っても過言ではない。。

WordPressのフォント変更のやり方

はじめにWordPressのフォント変更の手順を簡単にご説明すると、

  1. フォントを選んでダウンロード
  2. フォントファイルを変換
  3. サーバーにアップロード
  4. CSSにフォント変更を記述
  5. フォント変更完了

このような流れになります。
手順はあまり多くないので、早速トライしてみましょう!

自分好みのフォントを選ぶ

まずは、自分好みの文字フォントを探すことから始まります。

Googleで「フリー フォント」と検索すると、無料で使うことができる文字フォント一覧のサイトがヒットするので、そのサイトから使いたいフォントを選びましょう。
また、「商用利用はNG!」などフォントの配布先によって異なるので、フォントを配布しているサイトの利用規約は必ず読むようにしましょう。

個性的で可愛いフォントがたくさん置いてあるサイトを紹介しておきます。

使いたいフォントが決まれば、ダウンロードします。

フォント名.ttf」といった名前のファイルが実際に使うフォントファイルです。
また、フォントを配布しているサイトによっては、ダウンロードの形式も異なる場合もあります。zip形式でのダウンロードだと、解凍して「フォント名.ttf」のファイルを探してみましょう。

複数のフォントを試したい方はいくつかダウンロードしておくと良いでしょう。

フォントファイルの形式を変換する

WEBサイトで文字フォントを適用するには、ファイル形式を「TTF」→「WOFF」に変換する必要があります。

変換するソフトウェアは上のサイトからダウンロードすることができます。Windows版、Mac版があるので、ご使用のOSを選択してください。

WOFFコンバータの使い方

WOFFコンバータ
  1. ダウンロードした「ファイル名.ttf」を変換前ファイルに指定
  2. 変換開始を実行

しばらく待つと、「ファイル名.woff」という名前のファイルが完成します。

フォントファイルをサーバーにアップロード

変換したフォントファイルをサーバーにアップロードします。ご使用のFTPソフトで操作は異なりますが、ここではFileZillaを使用した場合をご紹介します。

起動して、上の欄にサーバーの情報(ホスト、ユーザ名、パスワード)を入力し、クイック接続をします。このFTP情報はサーバーに契約した際に送られてくるメールなどに記載されています。

 

接続すると、右下の欄にドメインが表示されるので、フォントを変更するサイトのドメインを選択しましょう。

ぶろぐ先生
こんな感じで自分のサイトのドメインが表示されるよ!

ドメインpublic.htmlwp-contentthemes の順に開いていくと、使用しているテーマが表示されるので、そこに先ほどのフォントファイルを加えてあげます。(子テーマを使用している場合は、子テーマに加えます。)

左側のローカル環境から、先ほど変換した「ファイル名.woff」を探し、使用しているテーマの中にドラッグ&ドロップで移動すればアップロードは完了です。

フォントを変更するコードを書き込む:CSS

サーバーにアップロードしたフォントファイルを読み込む為にCSSを編集します。

WordPressのダッシュボードにいき、「外観」 → 「テーマの編集」を選択します。(子テーマを使用している場合は、子テーマを選択します。)

テーマの編集

 

アップロードしたフォントファイルを読み込ませる為に以下のコードを記入します。

@font-face{
font-family:example;
src:url(‘フォント名.woff’)format(‘woff’);
}

font-family の横の「example」の所は、自由に名前を入れる事ができます。変更するフォント名を簡略化(わかりやすく)した名前を入れてあげると良いでしょう。url の横にある「フォント名.woff」の所は、先ほどアップロードしたフォントファイル名を正確に記入します。

 

次に、フォントをサイト全体に反映させるために以下のコードを記入します。

body {
font-family:example,YuGothic,’游ゴシック’,
‘Hiragino Kaku Gothic ProN’,
Meiryo, ‘游ゴシック’, sans-serif;
}

ここの「example」の部分も先ほど記入したフォント名を簡略化したものを入れます。サイト全体の文字に反映させるので、bodyタグを使用していますが、見出しのみに適用させたい方は「body」→「h2」などに書き換えると見出しのフォントのみが変更になります。

 

コードを書き終えたら、テーマの「ファイルを更新」をして終了です。

フォントが変わっているか確認しよう!

以上でフォント変更完了です。

サイトをリロードして実際にフォントが変わっているか確認しましょう!
サイトの印象がガラッと変わるのに驚くはずです。

 

ぶろぐ先生
フォントが変更されなかった方はここから先を読んでね!

リロードしても、フォントが反映されていない場合

サイトを読み込み直しても、フォントが適用されない!という方は、以下を確認してみてください。

CSSの記述が正しくない

ちょっとした記述ミスでフォントが反映されていないかもしれません。
フォントファイル名は正しく記入していますか?また、英字以外(カタカナやひらがな)で記述したものがある場合、単語の両端に「’」を付けなければいけないというルールが存在します。確認してみましょう。

ブラウザのキャッシュを消す

キャッシュとは、表示したウェブページのデータを一時的にコンピューターに保存し、同じページにアクセスした時にすばやく表示してくれる機能です。変更する前の情報がキャッシュされたままだと、読み込んでも反映されないことが多々あるので、ブラウザの履歴から保存されたキャッシュを削除してみましょう。

他に考えられる対策として…

  • フォントファイルのアップロード先は正しいか?
  • CSSの優先度を上げる。(!importantルール)

CSSが反映されない原因と対処法:3つのポイント

2018.05.10

まとめ

WordPressでフォントを変更する方法を解説しました。
フォントを変えるだけでサイトの印象がガラッと変わったと思います。サイトのデザインはとても重要になり、デザインが良ければユーザーも見やすく、「もっと見たい!」といった気持ちになるでしょう。

また、フォントだけではなく、文字の大きさや行間なども見直し、更に素敵なWEBサイトを作っていきましょう。