WordPress でローカルにフォントをホストする方法 (クラシック テーマとブロック テーマ!)

公開: 2023-03-29

カスタム Web フォントを使用することは、サイトをよりユニークにし、ブランディングを際立たせる優れた方法ですが、プライバシーからパフォーマンスまで、特定の問題が発生する可能性もあります。 解決策: 代わりに、WordPress Web サイトでフォントをローカルにホストします。

そのために、この記事では、このトピックについて知っておくべきことをすべてお伝えします。 以下では、最初に WordPress でローカルにフォントをホストすることがなぜ良い考えなのかを説明し、次にクラシック テーマと WordPress ブロック テーマの両方でそれを実現するためのコードとノーコード ソリューションの概要を説明します.

ローカルとリモートでの Web フォントのホスティング

したがって、おそらく最初に話さなければならないことは、フォントをローカルでホストすることの意味です。

最近では、多くの人がいわゆる Web フォントを使用して Web サイトのタイポグラフィを変更しています。 これらは通常、サードパーティのサービスから読み込まれるフォント ファイルであり、その中で最も人気があるのは Google Fonts です。

グーグルフォントホームページ

特別なリンクを追加するだけで、ウェブサイトで使用できる無料のフォントの膨大なライブラリがあります。 次に、誰かがあなたのサイトを表示するように要求すると、それらはリモートで読み込まれ、訪問者に表示できるようになります. Google Fonts は多くのテーマにも統合されているため、ユーザーはフォント フェイスを非常に簡単に切り替えることができます。

テーマ設定のGoogleフォントオプション

それとは対照的に、フォントをローカルでホストする場合、フォント ファイルは Google のようなリモート サーバーから読み込まれるのではなく、独自のサーバーに存在し、訪問者はそこからそれらを受け取ります。 結局、どちらも異なる方法で同じことを達成します。

WordPress でローカルにフォントをホストする必要があるのはなぜですか?

サードパーティのソリューションを使用する代わりに、独自のサーバーにフォント ファイルを配置することには、多くの正当な理由があります。

  • プライバシーに関する懸念— 特にヨーロッパのプライバシー法の対象となる場合、特に Google の Web フォントを使用すると問題が発生する可能性があります。 同社は、訪問者の IP アドレスやその他の情報を収集します。これらの情報を使用する場合は、プライバシー ポリシーに記載する必要があります。 そうしないと、罰金を科される危険があります。 このような問題を回避するために、多くの人は単純にフォントをローカルでホストすることを選択しています。
  • 可用性が高い— サードパーティがホストするフォントを使用する際の問題は、フォントを提供するサービスに依存してしまうことです。 彼らが廃業したり、サーバーが故障したり、何らかの理由で URL が変更されたりすると、突然、サイトに選択した書体が表示されなくなります。 Google の場合はありそうにありませんが、わからないこともあります。さらにおかしなことが起こっています。
  • 幅広い選択肢— 確立されたライブラリはさまざまなフォントを提供していますが、Web フォント形式ではないフォントがさらにたくさんあります。 したがって、フォントをローカルでホストする方法を知っていれば、プレミアム フォントを購入して使用する可能性がさらに広がります。
  • パフォーマンス— 独自のフォントをホストする場合、読み込み方法を完全に制御できます。 キャッシュを構成し、独自のサーバーの問題を修正できます。 さらに、独自のフォントをホストすると、別の接続からデータを取得する必要がないため、HTTP 要求が少なくなります。 上記のすべてがサイトのパフォーマンスに適しています。

短所と注意事項

同時に、ローカル サーバーでのフォントのホスティングに反対する要因もいくつかあります。

  • 再びパフォーマンス— 特に Google Fonts は、高いパフォーマンスを提供するように設定されています。 最寄りのサーバーからフォント ファイルを提供するための CDN があります。 さらに、最も人気のあるフォントの多くは、ほとんどのブラウザーのキャッシュに既に含まれています。 その結果、プレミアム カスタム フォントよりも高速に読み込まれます。 自分の動画をホストしてはいけないのと同じ理由です。 上記のすべての理由から、ローカル フォントを使用する場合は、独自の CDN を使用することをお勧めします。
  • 複雑性が高い— フォント ファイルをローカルに設定することは、たとえば、テーマにインストールされている Google フォントを使用するよりも困難です。 ただし、以下に示すように、完全に手動のルートを使用しない限り、それほど難しくはありません。 実際、ワンクリックのプラグイン ソリューションがいくつかあります。

ファイル形式についての簡単な言葉

利用可能なフォントファイル形式

知っておくべきことの 1 つは、フォントがさまざまな形式で利用できることです。最も一般的な形式は次のとおりです。

  • TrueType フォント (.ttf) — これは、1980 年代に Apple と Microsoft によって開発されたフォント標準です。 これは、オペレーティング システムで最も一般的な形式であり、Web でも使用できます。 推奨されるファイル形式ではありませんが、古いバージョンの Safari、iOS、および Android の適切なフォールバックです。
  • OpenType フォント (.otf) — TrueType に基づいて構築され、Microsoft によって開発および商標登録されている.otf形式は、スケーラブルなコンピューター フォント用です。
  • 埋め込み OpenType フォント (.eot) — これは、Web 上でレンダリングするための OpenType のレガシー形式です。 古いバージョンの Internet Explorer では必要です。
  • Web Open Font Format (.woff) — WOFF は、Web ページで使用するために明示的に開発されました。 これは、圧縮と追加のメタデータを備えた OpenType/TrueType 形式です。 この形式は、W3C での使用が推奨されており、すべての主要なブラウザーでサポートされています。
  • Web Open Font Format 2.0 (.woff2) — .woffの改良版で、ダウンロードを高速化するために圧縮率が向上しています。 Google によって開発され、最新のブラウザーと互換性があります。
  • SVG フォント (.svg) — フォントに SVG シェイプを使用することもできますが、この方法は現在 Safari でのみサポートされています。

では、どの形式を選択すればよいでしょうか。 もちろん、パフォーマンスに関しては WOFF/WOFF2 が最も理にかなっています。 ただし、古いブラウザとの互換性を保つために、他の形式を含めることも役立ちます。 さらに、Google Fonts などの一部のプロバイダーは、ダウンロード用に.ttfまたは類似の形式しか提供していません。 幸いなことに、それを回避する方法があります。

ただし、Web サイト用のカスタム フォントをプロバイダーから調達する場合は、上記の点に注意してください。

WordPress でローカルにフォントをホストする (手動、クラシック テーマ)

この時点で、WordPress サイトで実際にフォントをローカルでホストする方法について説明します。 カバーするさまざまなシナリオがたくさんあり、古典的なテーマと手動の方法から始めています。

これは最も技術的なアプローチであるため、簡単なソリューションに進む前に、最も難しい方法を最初に学びます。 すべてを手作業で行うと、その背後にあるメカニズムを理解するのに役立ち、その過程で WordPress のスキルも向上します。

1. フォント ファイルを入手する

フォントをローカルでホストするために最初に必要なものは、フォント ファイルです。 Google Fonts ではそれらをダウンロードできますが、前述のように、最新のファイル形式はまだ提供されていません。 理論的には、ファイルを自分で目的の形式に変換できますが、代わりに Google Webfonts Helper を使用する方がはるかに簡単です。

Google Webfonts ヘルパー ホームページ

彼らはあなたのために変換作業を行っただけでなく、フォントを埋め込むために必要なコードも提供します.

ここで最初に行う必要があるのは、好みのフォントを選択することです。 そのためには、左側のリストまたはその上の検索フィールドを使用できます。 目的の書体が見つかったら (この例では Advent Pro を使用します)、右側で文字セットとスタイルを選択します。

Google Webfonts ヘルパーでフォントの文字セットとスタイルを選択する

まず、キリル文字、ギリシャ文字、またはラテン拡張文字が必要かどうかを確認します。 その下で、必要なすべてのフォント スタイルのボックスにチェックを入れます。 Web サイトで実際に使用するものだけを選択して、訪問者が目にすることのないものをロードしないようにしてください。

Copy CSSの下で、ダウンロードするファイル形式を選択できます。

Google Webfonts ヘルパーでファイル形式を選択する

ベスト サポート設定には.eot 、 .ttf 、 .svg 、 .woff 、および.woff2ファイルが含まれますが、最新のブラウザーには後者の 2 つのファイルのみが含まれます。 通常は、デフォルト設定のままにしておくことをお勧めします。

選択に満足したら、下までスクロールし、大きな青いボタンをクリックしてファイルをダウンロードします。

Google Webfonts ヘルパーからフォント ファイルをダウンロードする

2. フォント ファイルを WordPress サイトにアップロードする

ハード ドライブにフォント ファイルを保存したら、最初のステップはそれらを解凍することです。 その後、それらをサーバーにアップする必要があります。

そのためには、FTP クライアント経由で接続し、テーマ ディレクトリ ( wp-content > themes内) に移動します。 ここでは、 fontsなどの独自のディレクトリ内にファイルを配置するのが理にかなっています。 したがって、まずディレクトリを作成してから、フォント ファイルを FTP クライアントにドラッグ アンド ドロップしてアップロードします。

ftp経由でフォントファイルをサーバーにアップロードする

ファイルは小さいので、それほど時間はかからず、次のステップに進むことができます。

3. WordPress テーマにローカル フォントを読み込む

次に、Web サイトでローカル フォントを使用する場合は、最初にそれらを読み込む必要があります。 そのために、Google Webfonts Helper は親切にも必要なマークアップを既に提供しています。 おそらく以前に見たことがあるでしょう。

css マークアップをコピーして、Google Webfonts ヘルパーでローカルにフォントをホストする

ファイルを配置したフォルダの名前がfontsでない場合は、下部でフォルダ名をカスタマイズできます。 互換性を最大限に高めるためにコードを使用するか、最新のブラウザーのみを使用するかについて、既に選択を行っているはずです。 したがって、マークアップのあるフィールドをクリックしてすべてをマークし、 Ctrl/Cmd+Cでコピーします。

その後、サーバー上のテーマのフォルダーに移動し、スタイル シート ( style.css ) を開きます。 ここで、先ほどコピーしたマークアップを先頭に貼り付けます。

ローカル フォントの CSS マークアップを wordpress スタイル シートに貼り付ける

簡単な注意: @font-faceで相対パスを使用するには、つまり WordPress がテーマ フォルダーのfontsディレクトリ内のローカル フォント ファイルにアクセスできるようにするには、上記の URL の前にある../を削除する必要があります。 したがって、私の場合、各行は次のようになります。

 url('fonts/advent-pro-v19-latin-regular.woff') format('woff'), /* Modern Browsers */

これは、 style.cssファイルがテーマ フォルダーに直接存在することを前提としています。

必要な変更を行った後、ファイルを保存して再アップロードすると、WordPress サイトでローカル フォントを使用する準備が整います。

4. サイトにすでに読み込まれているフォントを削除する

この手順は、テーマがサードパーティのフォントを既に取り込んでいる場合にのみ適用されます。 前述の理由と、同じフォントを 2 回読み込まないようにするため、およびローカル フォントが有効になっているかどうかを確認するために、これを排除する必要があります。

サードパーティのフォントをオフにする方法は、最初の読み込み方法によって異なります。 一部のテーマには、システム フォントなどに切り替えることができる専用のオプションがあります。

テーマオプションでGoogleフォントを無効にする

何らかの理由でそれらがheader.phpファイルにハードコードされている場合は、そこから削除する必要があります (そのためには子テーマを使用します)。 functions.php経由で読み込まれる場合は、そこから呼び出しを削除できます。 これも子テーマで行います。

最後に、試すことができる Google フォントの無効化と削除があります。 Autoptimize には Google Fonts を削除するオプションもあり、 Extraタブの下にあります。

自動最適化設定で Google フォントを削除する

4. ローカル フォントを使用する

最後のステップは、実際にローカル フォントをサイトの要素に割り当てることです。 たとえば、Twenty Twenty-One テーマでは、次のマークアップを使用できます。

 .entry-title { font-family: Advent Pro; }

これにより、ブログ記事のタイトルが新しい Advent Pro フォントで表示されます。

Twenty Two One テーマのローカル カスタム フォント

クラシック テーマでのローカル フォントのホスティング: プラグイン版

上記が複雑すぎて、Web サイトに既に Google フォントがある場合 (テーマなどを介して)、WordPress プラグイン ソリューションを使用してフォントをローカルにホストすることもできます。 そのための最良のオプションの 1 つは、WordPress ディレクトリで無料で入手できる OMGF または Optimize Google Fonts プラグインです。 Plugins > Add Newから通常の方法でインストールします。

omgf プラグインをインストールして、wordpress でローカルにフォントをホストします

これが完了すると、 [設定]の下に[Google フォントの最適化]という新しいメニュー項目が表示されます。 クリックすると、次のメニューが表示されます。

omgf設定

使い方はとても簡単です。 ほとんどの場合、下部にある[保存して最適化]をクリックするだけです。 プラグインは、サイト上のすべての Google フォント スタイル シートを自動的に検出し、ローカル バージョンに置き換えます。 画面の下部にそれらのすべてが表示されます。

omgf でローカル Google フォントを構成する

ここでは、一部のフォントまたはフォント スタイルを読み込まないようにプラグインを設定するか、それらを事前に読み込まないようにするオプションもあります。これは、スクロールせずに見えるタイポグラフィにとって重要です。 他にもいくつかの設定がありますが、それらは主に何かが機能していない場合のためのものです。

OMGF は、サイトに追加の Google フォントをインストールするためのアドオンも支払っています。 非常にリーズナブルな価格で、チェックする価値があります。 その他のプラグイン オプションには、Perfmatters と、前述の Disable and Remove Google Fonts プラグインの Pro バージョンが含まれます。

WordPress ブロックテーマでフォントを手動でホストする

WordPress のブロック テーマでは、ローカル フォントを使用することもできます。 実際、この記事を書いている時点では、それがすべてであり、現在、ブロックテーマでサードパーティのフォントをホストすることはできません (ただし、そのための API は作成中です)。

そのため、フォント ファイルを取得してサーバーにアップロードする最初のいくつかの手順は、クラシック テーマの場合と同じです。 そこから違いが始まります。

theme.json 内のフォントの読み込み

ブロック テーマでは、 theme.jsonスタイリングの中心的なファイルであり、フォントを設定する場所です。 そのためには、 settingsおよびtypographyの下でfontFamiliesを探します。

wordpress theme.json のタイポグラフィ設定

ブロック テーマでは、次の値を使用して新しいフォントが追加されます。

  • fontFamily — CSS で使用される新しいフォントの名前。 つまり、代替フォントを含めることができます。
  • name — WordPress バックエンドに表示されるフォントの名前。
  • slug — WordPress が CSS カスタム プロパティで使用する一意の識別子。
  • fontFace — これは CSS の@font-faceルールに対応し、フォントを実際にエンキューするものです。

機能するために、 fontFaceは他にもいくつかの情報が含まれています。

  • fontFamily — フォントの名前 (再び)。
  • fontWeight — スペースで区切られた使用可能なフォントの太さのリスト。
  • fontStyle (オプション) — ここでfont-style属性を設定できます ( normalやitalicなど)。
  • fontStretch (オプション) — たとえば、圧縮されたバージョンを持つフォント ファミリの場合。
  • src — ローカル フォント ファイルへのパス。

たとえば、さまざまなスタイルをロードするために、 fontFaceに複数のフォント ファイルを含めることができます。 中括弧とカンマで区切ります。 上記と同じフォントの例では、次のようになります。

 "fontFamilies": [ { "fontFamily": "Advent Pro", "slug": "advent-pro", "fontFace": [ { "fontFamily": "Advent Pro", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-regular.woff" ] }, { "fontFamily": "Advent Pro", "fontStyle": "italic", "fontWeight": "400", "src": [ "file:./fonts/advent-pro-v19-latin-italic.woff" ] } ] } ]

Gutenberg プラグインをアクティブにすると、代わりにfunctions.php内でwp_register_webfonts()を使用することもできます。これは、この目的のための新しい PHP 関数であり、コアにはまだありません。 上記と同じ引数を取りますが、PHP 形式です。

ブロック テーマのローカル フォント: プラグイン ソリューション

最後に、プラグインを使用して、WordPress のブロック テーマでフォントをローカルにホストすることもできます。 それらの 1 つは Create Block Theme プラグインです。 インストールしてアクティブ化すると、新しい[テーマ フォントの管理]オプションが[外観]メニューに追加されます。

create block theme plugin を使用してテーマのフォントを構成する

ここでは、現在のテーマに含まれているフォント ファミリーをプレビューしたり、フォント ファミリー全体または単一のスタイルを削除したりできます。

さらに興味深いのは、上部にあるAdd Google FontとAdd Local Fontというボタンです。 Google フォント オプションから始めましょう。

使い方はとても簡単です。 そのボタンをクリックし、上部のドロップダウン リストから目的のフォントを選択します。 その後、テーマに追加するフォントの太さとスタイルのボックスにチェックを入れます。 最後に、下部にある[テーマに Google フォントを追加]をクリックします。

create block theme プラグインを使用してワードプレスで Google フォントをローカルにホストする

プラグインは選択したフォントを自動的にダウンロードして埋め込み、ブロックとサイト エディターで使用できるようにします。

新しく追加された Google フォントが wordpress サイト エディターで利用可能に

ローカル フォント オプションも同様に機能します。

create block theme プラグインを使用してローカル フォントをアップロードする

ここでの違いは、ハード ドライブからフォント ファイルをアップロードし、フォントの名前、スタイル、および太さを提供して、テーマが何であるかを認識できるようにすることです (プラグインも自動的にこの情報を認識しようとします)。 これは、フォント ファイルを 1 つずつアップロードする必要があることも意味します。 ただし、全体としては非常にシンプルです。

WordPress でローカルにフォントをホストする準備はできていますか?

カスタム フォントは、Web サイトを美しくするための一般的な方法です。 ただし、WordPress でローカルにホストする機能は、パフォーマンス、法律、およびその他の理由から、ますます重要になっています。

上記では、そのためのいくつかの方法について説明しました。 手動またはプラグインを使用して実現できます。 全体的な原則は非常に似ていますが、ブロック テーマまたはクラシック テーマを使用する場合にも違いがあります。 あなたが今、その仕事に自信を持っていることを願っています。

WordPress でフォントをローカルにホストすることをどのように選択しましたか? コメント欄でお知らせください！