WordPressで独自にWebフォントを追加して利用したい時に使えるプラグイン「CITS Support SVG, WEBP, ICO Media and TTF,OTF File Upload」

2024年6月13日

Webフォントというと、Googleフォントなどホスティングもしてくれるのであとはタグを自分のサイトにぺたっと貼るだけで利用可能、というものが多くありますがやはり転送制限などがあるため、どうしても独自にWebフォントをサーバーにアップロードして利用したい・ホスティング型ではないアイコンフォントを利用したい、という場合もあるかと思います。
自分で作った独自テーマを利用している場合は独自テーマをアップロードする際にまとめてアップロードしてCSS等に追記すれば利用可能ですが、配布・販売されているテーマを利用している場合は子テーマを作ってごにょごにょ…とする必要があり、一筋縄ではいきません。

本記事ではWordPressのWebフォントのフォントファイルのアップロードから適応までを管理画面内で完結する方法についてご紹介します。

本記事の前提条件

独自テーマではなく、配布・販売されているテーマを利用している場合
プラグインを追加できる権限でログインできる場合
「テーマカスタマイザー」の「CSS追加」の機能が利用できる場合
Webフォントとして利用したいフォントが、ライセンス上、Webフォントとして利用することができるフォントである場合※

※ライセンス上Webフォントとして利用できないフォントも数多くありますので、必ずライセンス上Webフォントとして利用可能かどうか確認した上で実施してください。

「CITS Support SVG, WEBP, ICO Media and TTF,OTF File Upload」について

通常、WordPressはフォントファイル（otf・ttfなど）のアップロードができません。
「CITS Support SVG, WEBP, ICO Media and TTF,OTF File Upload」はそういったWordPressのデフォルトではアップロードできないファイルをアップロードできるようにするプラグインです。
プラグイン名にも入っていますが、このプラグインを利用してアップロードできるファイルは下記です。

画像：SVG・ICO・WebP
フォント：TTF・OTF・EOT・WOFF

利用方法は簡単で、プラグインの新規追加画面から追加し、有効化するだけで利用が可能です。特別な設定も必要ありません。

やってみよう！

チュートリアルとしては好きなアイコンをアイコンフォント化して利用できる「IcoMoon」を利用する場合を想定して進めます。
まずは「IcoMoon」のサイトから好きなアイコンを選び、アイコンフォントを作っておきましょう。

あわせて読みたい

SVG Icon Libraries and Custom Icon Font Organizer ❍ IcoMoon Easily mange your icons and integrate them in your projects. Browse free icons or import your own SVG icons to export as icon font, SVG, PNG, sprite and more.

STEP

プラグインを追加して有効化する

「CITS Support SVG, WEBP, ICO Media and TTF,OTF File Upload」をプラグインの新規追加画面から追加→有効化します。

STEP

フォントファイルをアップロードする

WordPressのメディア欄に追加したいファイルをアップロードしていきます。

「IcoMoon」の場合はこういった感じで複数のフォントファイルが出力されているのですが、このファイルすべてをアップロードします。

アップロードしたあとに、メディア欄からアップロードしたファイルの「ファイルの URL」欄に表示されているURLをそれぞれ控えておきましょう。

STEP

テーマカスタマイザーからCSSを追加する

Webフォントを読み込むべく、テーマカスタマイザーの「追加CSS」の欄に@font-face{～～}の記載を行います。

「IcoMoon」の場合、style.cssにこういった記載がありますが、フォントのファイルパス箇所をSTEP 2で控えたURLにそれぞれ差し替えたものを含めたstyle.cssの中身すべてを「追加CSS」の欄に追記します。

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?c3ag71');
  src:  url('fonts/icomoon.eot?c3ag71#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?c3ag71') format('truetype'),
    url('fonts/icomoon.woff?c3ag71') format('woff'),
    url('fonts/icomoon.svg?c3ag71#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

STEP

フォントを利用しよう

おつかれさまでした！
あとはWebフォントがあたってほしい箇所向けにfont-familyを使ってCSSを書いていくだけです

参考例としてIcoMoonを利用する場合を取り上げましたが、Webフォント化が可能なフリーフォントなどを利用する場合は下記の記事などが参考になると思います。