2026年10月9日

WordPressのテーマにFont Awesomeを最適な方法で読み込む手順

テーマ・デザイン

Font Awesome をテーマで使うなら、最適な読み込み方は「使うアイコンの量」で決まります。数個のアイコンだけなら SVG で直接埋め込むのが最も軽く、サイト全体で多くのアイコンを使うなら、自分のサーバーに置いたファイルを必要なスタイルだけ wp_enqueue_style() で読み込むのが扱いやすい方法です。この記事では、読み込み方の選び方、子テーマでの具体的な書き方、テーマやプラグインとの二重読み込みの解消、表示の確認方法までを説明します。

作業は子テーマの functions.php とファイル配置を変えるため、事前にバックアップを取り、可能ならステージング環境で試してください。

読み込み方の選択肢と向き不向き

Font Awesome の読み込み方は大きく4つあります。

Kit（公式の埋め込みコード）：Font Awesome のアカウントで作った Kit の <script> を1行入れる方法です。設定画面で使うスタイルを選べ、手軽ですが、外部の JavaScript とフォントの取得に頼ることになります
CDN の CSS：公開CDNの all.min.css を読み込む方法です。古い解説記事で最もよく見かけますが、全スタイル分の CSS とフォントを読み込みがちです
自分のサーバーに置く（セルフホスト）：公式サイトから Web 用の配布ファイルをダウンロードし、テーマ内に置いて読み込む方法です。読み込むファイルを自分で絞れ、外部サービスの影響を受けません
SVG を直接使う：アイコンを SVG として HTML に書くか、配布ファイルに含まれるスプライトを参照する方法です。フォントファイルも CSS も不要で、使う数が少ないほど有利です

以前は「CDN なら他のサイトで読み込んだキャッシュが使い回せる」と言われていましたが、現在の主要ブラウザはキャッシュをサイトごとに分けて保存するため、この利点はほとんど期待できません。むしろ別ドメインへの接続が1つ増えるぶん、最初の表示が遅れる要因になります。

迷ったら、アイコンが10個前後までなら SVG、それ以上でブロックや投稿の中でも自由に使いたいならセルフホストのフォント、と考えると判断しやすくなります。

最初に二重読み込みがないか確認する

自分で読み込む前に、すでにどこかで読み込まれていないかを確かめます。テーマ、ページビルダー、メニューやSNSボタンのプラグインが、それぞれ別の版の Font Awesome を読み込んでいることは珍しくありません。版が混ざると、アイコンが四角い豆腐記号になったり、別のアイコンに置き換わったりします。

ページのソースを開き、font-awesome、fontawesome、fa- を含む <link> や <script> を検索します。WordPress で登録されたファイルには id="ハンドル名-css" が付くことが多いので、そこからハンドル名が分かります。ブラウザの開発者ツールの「ネットワーク」パネルで woff2 を絞り込むと、実際に取得されているフォントファイルの数も確認できます。

不要なものが見つかったら、子テーマから外します。

<?php
add_action( 'wp_enqueue_scripts', function () {
    // 実際のハンドル名に置き換える
    wp_dequeue_style( 'example-plugin-font-awesome' );
    wp_deregister_style( 'example-plugin-font-awesome' );
}, 100 );

優先度を 100 にしているのは、テーマやプラグインが登録した後に外すためです。外したプラグイン側の画面（SNSボタンなど）でアイコンが消えていないかは、自分で読み込む Font Awesome と版やクラス名が合っているかに左右されるため、後で確認します。

セルフホストで必要なスタイルだけ読み込む

公式サイトから「Web 用」の無料版をダウンロードして展開すると、css と webfonts のフォルダが入っています。両方を子テーマに fontawesome フォルダとしてコピーします。CSS の中でフォントは ../webfonts/ という相対位置で参照されているため、2つのフォルダの位置関係は崩さないようにします。

all.min.css は全スタイルを含むため、使うものだけを選びます。土台の fontawesome.min.css に、塗りつぶしの solid.min.css、SNSロゴの brands.min.css など必要なものを加えます。

<?php
add_action( 'wp_enqueue_scripts', function () {
    $dir = get_stylesheet_directory() . '/fontawesome/css/';
    $uri = get_stylesheet_directory_uri() . '/fontawesome/css/';

    wp_enqueue_style(
        'my-fa-core',
        $uri . 'fontawesome.min.css',
        array(),
        filemtime( $dir . 'fontawesome.min.css' )
    );
    wp_enqueue_style(
        'my-fa-solid',
        $uri . 'solid.min.css',
        array( 'my-fa-core' ),
        filemtime( $dir . 'solid.min.css' )
    );
    wp_enqueue_style(
        'my-fa-brands',
        $uri . 'brands.min.css',
        array( 'my-fa-core' ),
        filemtime( $dir . 'brands.min.css' )
    );
} );

親テーマのフォルダではなく get_stylesheet_directory() を使うのは、子テーマに置いたファイルを参照するためです。バージョンにファイルの更新日時を使うと、Font Awesome を更新したときにブラウザのキャッシュが自動で切り替わります。

ファーストビューにアイコンがある場合は、そのフォントを先に取得させると、アイコンが遅れて現れる時間を短くできます。

add_action( 'wp_head', function () {
    $font = get_stylesheet_directory_uri() . '/fontawesome/webfonts/fa-solid-900.woff2';
    printf(
        '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
        esc_url( $font )
    );
}, 1 );

ファイル名は版によって変わることがあるため、展開した webfonts フォルダの実際の名前に合わせます。プリロードは使わないフォントに付けると逆に無駄な通信になるので、実際に最初の画面で使うスタイルだけに絞ります。

アイコンが少ないなら SVG スプライトを使う

配布ファイルには、スタイルごとに多数のアイコンをまとめた SVG スプライト（sprites フォルダ）も含まれています。子テーマにコピーし、テンプレートから次のように参照すれば、フォントも CSS も読み込まずにアイコンを表示できます。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <svg class="icon" width="20" height="20" aria-hidden="true" focusable="false">
        <use href="<?php echo esc_url( get_stylesheet_directory_uri() . '/fontawesome/sprites/solid.svg#house' ); ?>"></use>
    </svg>
    <span>ホーム</span>
</a>

ただし、スプライトのファイルは全アイコン分あるため、それなりの大きさがあります。使うアイコンが数個なら、必要な <symbol> だけを抜き出した小さなスプライトを作るか、個別の SVG ファイルの中身をテンプレートに直接書くほうが軽くなります。width と height を指定しておくと、読み込み中に場所が確保され、レイアウトのずれ（CLS）を防げます。

クラス名と版の違いに注意する

Font Awesome はメジャーバージョンが上がるたびにクラス名や配布ファイルの構成が見直されてきました。例えば 5系の fas fa-home は、6系では fa-solid fa-house という書き方が基本になっています。古い書き方を残したまま新しい版に替えると、一部のアイコンが表示されなくなります。

配布ファイルには旧版のクラス名を補う互換用の CSS が含まれていることがありますが、互換の範囲は版ごとに異なります（2026年10月現在）。更新前に公式サイトのアップグレードガイドを確認し、テーマ内の旧クラス名を検索して書き換えておくと安全です。

アクセシビリティとライセンス

装飾目的のアイコンには aria-hidden="true" を付け、スクリーンリーダーに読ませないようにします。アイコンだけのボタン（検索、メニューの開閉など）は、見えないテキストや aria-label で役割を伝えます。アイコンの意味を色や形だけに頼らず、テキストを添えるのが基本です。

無料版は、アイコン、フォント、コードでそれぞれ異なるライセンスが適用されています。配布ファイル内のライセンス表記やファイル先頭のコメントは削除せずに残してください。最新の条件は公式サイトのライセンスのページで確認できます。

公式プラグインを使う場合

コードを書きたくない場合は、Font Awesome の開発元が提供している公式プラグイン「Font Awesome」を使う方法もあります。管理画面から読み込み方（Web フォントか SVG か、CDN か Kit か）を選べ、他のテーマやプラグインとの読み込みの衝突を調べる機能も備えています。設定項目の名称や選べる内容は版によって変わるため、導入時にプラグインの説明を確認してください。この場合も、テーマ側で別に読み込んでいるものは外しておきます。

直した後の確認

キャッシュ系プラグインとブラウザのキャッシュを削除し、ログアウトした状態でアイコンを使っている全種類のページを表示する
開発者ツールの「ネットワーク」パネルで、Font Awesome の CSS とフォントがそれぞれ1回ずつしか読み込まれていないことを確かめる
四角い記号や別のアイコンになっている箇所がないか、ヘッダー、フッター、SNSボタン、ブロック内を見て回る
PageSpeed Insights で再計測し、フォントや CSS に関する指摘と CLS が悪化していないかを見る

表示が崩れたときは、ほとんどが「クラス名と読み込んだスタイルの組み合わせ違い」か「フォントファイルの位置ずれ」です。コンソールやネットワークパネルに 404 が出ていれば後者なので、css と webfonts の位置関係を見直します。

まとめ

読み込み方は使うアイコンの量で選ぶ。少数なら SVG、多数ならセルフホストで必要なスタイルだけ
自分で読み込む前に、テーマやプラグインによる二重読み込みを調べて外す
子テーマでは get_stylesheet_directory_uri() と wp_enqueue_style() を使い、依存関係とバージョンを指定する
版が変わるとクラス名やファイル構成が変わるため、アップグレードガイドを確認してから更新する
装飾アイコンは aria-hidden="true"、ライセンス表記は残す