通常のフォントにはないフォントが634種類も使える便利なWebフォント「Font Awesome」をご存知ですか?

Webページでは、機種依存などのフォントを使うと、自分のPCでは表示できても他のPCでは表示できなかったり、TwitterやFacebookなどのマークを使いたいと思っても画像で貼り付けるしかなくて不便だったりします。

そんな不便を解消してくれるのがWebフォントと呼ばれるもので、Webページでも様々なフォントを表示することが可能になっています。

そのなかでも、「Font Awesome」は、使いたいデザインのフォントがほとんど登録されているので、使っている方も多くおられるのではないでしょうか。

そんな便利なWebフォントですが、欠点として、フォントファイルをダウンロードして表示しているので、どうしても、ページの表示速度が遅くなったり、Webフォントだけが遅れて表示されてしまったりします。
「Font Awesome」も634種類ものフォントが登録されていますので、ファイルのサイズもどうしても大きくなってしまうので、表示速度や通信量が気になるところですよね。

「Font Awesome」は、ダウンロードして自分のサーバーに配置することもできるので、表示速度などはある程度、改善できるのでうが、ファイルサイズだけはこれだけでは小さくすることはできません。

でも、「Font Awesome」の全てのフォントを使っている方はほとんどいなくてその中の数個だけの方がほとんどだと思うので、その数個のフォントファイルを作ってしまえば、フォントファイルのサイズを小さくすることができます。

今回は、「Font Awesome」のWordPressでの自サーバーへの配置方法を、必要なフォントのみを抽出してフォントファイルを作成する方法をご紹介します。

Font Awesomeの自サイトへの配置方法【WordPress】

  1. http://fontawesome.io/にアクセスします。
  2. 「Download」ボタンをクリックします。
  3. ”No thanks,just download Font Awesome”リンクをクリックします。
  4. ダウンロードしたZIPファイルを解凍します。
  5. 解凍したファイルをFTP等で任意の場所(子テーマフォルダ等)にアップロードします。
    ※ 必要なファイルは
    font-awesomeフォルダ
      fontsフォルダ→fontawesome-webfont.eot
             fontawesome-webfont.svg
             fontawesome-webfont.ttf
             fontawesome-webfont.woff
     cssフォルダ→font-awesome.css
             font-awesome.min.css
     です。フォルダの構成は変更しないでアップロードしてください。
  6. header.phpの内に下記コードを追加します。
    <link rel="stylesheet" href="/wp-content/themes/biz-vektor_child/font-awesome/css/font-awesome.min.css">
  7. 記事等にフォント表示用タグを入力してみて、Font Awesomeフォントが表示されるか確認します。
    ※例 Twitterフォントの表示

    <i class="fa fa-twitter"></i>

必要なフォントのみを、自サイトに配置する方法【WordPress】

※ 前述の「Font Awesomeの自サイトへの配置方法」でFont Awesomeフォントが表示を完了させておきます。

  1. https://icomoon.io/にアクセスします。
  2. 右上の”IcoMoon App”をクリックします。
  3. 最下部にある”Add Icons From Library”をクリックします。
  4. リスト中の「Font Awesome」の”Add”ボタンをクリックします。
  5. アイコンリストの中から必要なフォントをクリックして選択します。
  6. 全て選択したら「Generate Font」をクリックします。
  7. 「Download」ボタンに切り替わるので、その右にある”歯車”ボタンをクリックします。
  8. 下記の項目の設定を変更して右上の「X(バツ)」ボタンをクリックします。
    • Font Name:fontawesome-webfont
    • Class Prefix:fa-
    • Baseline Height:15
  9. 「Download」ボタンをクリックして、ZIPファイルをダウンロードします。
  10. ZIPファイルを解凍して、「style.css」ファイルをテキストエディタで開きます。
  11. 2〜6行目の”fonts/fontawesome-webfont〜”を”’../fonts/fontawesome-webfont”に変更します。
  12. 「style.css」のファイル名を「font-awesome.min.css」に変更します。
  13. 変更した「font-awesome.min.css」とfontフォルダ内のファイルを、前述でアップロードした「fontフォルダ」と「cssフォルダ」に上書きします。
    ※ 同じファイル名のファイルになっています。
  14. 記事等にフォント表示用タグを入力してみて、Font Awesomeフォントが表示されるか確認します。
    ※例 Twitterフォントを追加している場合

    <i class="fa fa-twitter"></i>

以上で必要なフォントだけをフォントとして使うことができます。
フォントを追加したくなったら、同じ手順で行えば追加も可能です。

また、svgファイルを用意できればAwesomeフォント以外のフォントファイルも組み合わせて独自のフォント構成で使うことっも可能です。

svgファイルを読み込むときは、”Add Icons From Library”ではなくウィンドウ上部にある”Import Icons”ボタンをクリックすると読み込めます。

Webフォントが大きすぎて、ページの表示が遅かったり、データの通信料を減らしたい方は、この方法を導入することでかなり改善できると思いますので、お試しいただければと思います。

また、WordPressのテーマによっては、デフォルトでAwesomeフォントをロードするようになっている場合もありますので、重複しないようにご注意ください。

Webフォントは今まで表現できなかった文字やマークなどが使えるようになるのでWebページの表現の幅が広がりますのでおすすめです。

しかし、フォントファイルのサイズが大きくなればなるほど、ページの表示速度は、どんどん遅くなっていきますので、サイトをみてくれる方に優しいページ作りをするためにも、フォントファイルの見直しを行っていみてはいかがでしょうか。


☆もしこの記事が気に入っていただけましたなら、SNSでシェアをお願いします。非常に励みになります。 ☆フォロー・配信購読はこちら