WordPress運用の過程で、フォントを変えてみたいと思ったことはありませんか？
私は形から入るタイプで、WordPressを初めてすぐ、モチベーションを上げるためにフォントの変更に取り掛かりました。
初心者中の初心者、超絶初心者のうちに取り掛かったため、とても悪戦苦闘しました、、、
終わってみるとさほど難しい作業ではなかったものの、試行錯誤の上の仕上がりだったため、忘れないうちに備忘録として残しておきたいと思います。
Page Contents
フォント変更の環境
当サイトでのフォントの設定をもとに説明します。
以下設定環境です。参考になればと思います。
OS:Mac
テーマ：Xeory Base
使用フォント：あずきフォント
相互変換ソフト：WOFFコンバータ
FTPソフト：FileZilla
WordPressでフォントの変更方法
フォントを選んでダウンロードする
好みのフリーフォントを選び、ダウンロードします。
当サイトではあずきフォントを使用していて、その変更方法について説明しますが、基本的には他のフリーフォントを使用しても、設定の仕方は同じです。
デスクトップなど、自分の分かりやすい場所にダウンロードします。
Zipファイルでダウンロードされた場合は、解凍します。
ファイルがいくつかある場合、ダウンロードしやすいようにひとつにまとめて圧縮してある事があります。それをZipファイルと良い、ファイルを開くためには解凍する必要があります。
フォントの拡張子をwoff形式に変換する
ファイルを開くと、「azuki.ttf」というファイルがあります。
フォントの形式（拡張子）にはいくつか種類があり、ブラウザによって対応している形式が異なります。
ダウンロードした拡張子はttfとなっていますが、WordPressでフォントを使うためには、ttf形式からwoff形式に変換する必要があるため、WOFFコンバータを使います。
WOFFコンバータをダウンロードして、起動します。
起動するとこのような画面が表示されます。
変換前ファイル：デスクトップにダウンロードした「azuki.ttf」を指定します。
フォントをWOFFに変換する時：「EOTファイルを作成する」にチェックを入れた場合、サポートが終了している古いブラウザにも対応する事ができます（任意）。当サイトでは作成していません。
変換開始をクリックすると、「azuki.woff」というファイルが作成されます。
EOTファイルを作成した場合、「azuki.eot」ファイルも作成されます。
woffファイルをサーバーにアップロードする
FTPソフトを使ってファイルをアップロードします。
FTPソフトはFileZillaを使いました。
アップロード先はテーマのスタイルシート(style.css)ですが、親テーマに直接アップロードするのはリスクがあるので、子テーマにアップロードします。
子テーマを作成してない場合、直接親テーマにアップロードする事もできなくはないのですが、テーマのアップデート時に消えてしまう可能性があるので、ぜひ子テーマを設定することをお勧めします。子テーマについて詳しくまとめています。
FileZillaを起動するとこのような画面が表示されますので、ホスト名、ユーザー名、パスワードを入力してサーバーにログインします。
ログインすると、右側のリモートサイトの部分に、サーバー上にあるサイトのファイルが表示されます。
フォントを変更したいサイトのドメインを選択し、public_html＞wp-content＞themes＞子テーマの中に「azuki.woff」ファイルをアップロードします。
左側のローカルサイトには自分のPC上のファイルが表示されています。
デスクトップにフォントをダウンロードしたので、ローカルサイト側のDesktop＞ダウンロードしたフォントのファイル＞azuki.woffを探し、右側のリモートサイトの子テーマの中にドラッグ&ドロップでアップロードが完了です。
EOTファイルを作成した場合は、こちらも一緒にアップロードします。
スタイルシート(style.css)にコードを記入する
WorsPressの管理画面から、外観＞テーマエディターを開きます。
右上の「編集するテーマを選択」で子テーマを選択し、「テーマファイル」から「スタイルシート(style.css)」を選択し、下記のコードを記入します。
@font-face{
font-family:azuki;
src:url('azuki.woff')format('woff');
}
font-familyのあとの部分は任意でタイトルを設定します。今回は分かりやすくazukiとしました。
azuki.woffの部分には、サーバーにアップロードしたファイルの名前と一致する必要があります。
EOTファイルを作った場合は、３行目と４行目の間に行を追加し下記コードを入力します。
url("azuki.eot") format("eot");
記入できたら、ファイルを更新します。
フォントの変更の作業は以上で完了です。何度か再読み込みしてサイトに反映されているか確認してみてください。
フォントの変更は必要？
フォントは、サイトのデザインの一部であり、見た目からサイトのイメージに大きく影響します。
サイトの内容と、サイトのデザインやイメージが一致していると、読み手はその内容により関心を持つ事ができます。
テーマにもともと設定されているフォントでは物足りなさを感じたり、サイトイメージとの相違があった場合は、なかなか読みにくいものです。
そういった意味で、フォントは読み手へ与えるイメージに大きく関わっています。
また、Wordpressはカスタマイズ性が高く、自分で作り上げていくところに魅力があります。
ひとつひとつ自分好みに作り上げていく事で、愛着も湧きます。
しかし、私のように、超絶初心者の方が真っ先に触る部分ではないかもしれません。
何を隠そう、私はWordpress立ち上げて記事数もそこそこに、真っ先にフォントの変更に着手しました。
完全に形から入るタイプなんです！！！
その結果、、、cssってなんだ？子テーマって何？？？何このコード！！！はぁ、、、？泣。という結果に。
これが悪戦苦闘した原因です。
結果的にさほど難しくない作業だったにも関わらず、１から勉強しながら頭を抱えての作業だったので、設定完了するまでにものすごーーーーく時間と手間がかかりました。。。
よく挫折しなかったなぁ、、、と自分でも思います。
WordPressを始めたばかりの超絶初心者さんが最初に記事をとにかくひたすら書くべし！と言われるのは、挫折をしないため、、、という意味もあるのでしょう。
もちろん、記事を書かないことには何も始まらない事が前提ではあるのですが。
それでも私はモチベーションを上げるために最初にフォントの変更に取り掛かったんですけどね…
プラグインを使う方法もある
なかなかフォントの設定がうまくいかなかったり難しいと感じる様なら、プラグインのEasy Google Fontsを使うのもお勧めです。
GoogleのWebフォントを無料で使えるプラグインです。
色やサイズなどの細かい設定も簡単にできるので、挫折することはないでしょう。
まとめ
フォントをサイトのイメージに合わせることで、読み手が読みたいと思えるように興味を引きつける事ができます。
さほど難しい作業ではないので、ぜひフォントはサイトイメージに合わせて設定することをお勧めします！
私のような超絶初心者さんでも分かりやすいように説明してみましたが、、、心が折れてしまっては本末転倒なので、挫折しない程度に余裕を持って取り掛かってみてください。
自分好みに作り上げて反映された時は、とても嬉しいものです！
