WordPress サイトにオフライン フォントを追加する方法

公開: 2022-10-31

WordPress サイトに個性を加えたい場合は、オフライン フォントの読み込みを検討してください。 これには多くの方法がありますが、Font Squirrel Webfont Generator を使用した最も簡単な方法の 1 つを紹介します。 フォント ファイルをダウンロードしたら、それらを WordPress サイトにアップロードして、他のフォントと同じように使用できます。 始めましょう！

この記事はかなり長い間私の机の上に置かれていたので、あなたと共有したいと思いました. Google フォントは完全にローカルに読み込まれます。 これまでのところ、Crunchify.com の Google フォント Oswald と Lato を使用しています。 新しいタブに表示される上の画像の URL を開くだけで、14 個の新しいフォントが生成されていることがわかります。 このチュートリアルは、次の質問がある場合にも役立ちます。 Lato.zip ファイルを解凍すると、拡張子が .ttf の Lato のフォント 10 個すべてを表示できます。 ほとんどの Web サイトでは、標準、太字、斜体のフォントのみが必要です。

ステップ 2 では、フォントを woff2、eot、svg、ttf、および wof の形式に変換する必要があります。 ファイルをサイト https://Font-Converter.net/enにアップロードすると、フォントがこれらの形式に変換されます。 他に何も言う必要はありません。 ローカル ファイル システムからフォントをロードできるようになりました。

WordPress テーマにカスタム フォントを追加するにはどうすればよいですか?

画像提供：pinimg.com

WordPress テーマにカスタム フォントを追加するには、いくつかの方法があります。 1 つの方法は、Google Fonts ライブラリを使用することです。 Google Fonts Web サイトで、使用可能なすべてのフォントの包括的なリストを見つけることができます。 気に入ったフォントが見つかったら、そのコードをテーマのスタイルシート (style.css) に追加できます。 たとえば、「Open Sans」フォントを使用する場合は、次のコードをスタイルシートに追加します。 body { font-family: 'Open Sans', sans-serif; WordPress テーマにカスタム フォントを追加するもう 1 つの方法は、 Easy Google Fontsなどのプラグインを使用することです。 このプラグインを使用すると、コードを編集することなく、テーマにカスタム フォントを簡単に追加できます。

Easy Google Fonts プラグインを使用して、WordPress サイトにカスタム フォントを追加できます。 この方法を使用すると、さまざまなフォントを使用して Web サイトに注目を集めることができます。 タイポグラフィには、研究において多くの利点があることが示されています。 シンプルなウェブサイトは、お客様とのコミュニケーションを容易にします。 CSS プロパティを使用すると、スタイルと配置の変更に加えて、好みのフォントのスタイルと配置を変更できます。 独自のフォント コントロールに加えて、WordPress プラグイン設定ページを使用してそれらを追加できます。 プラグインを使用したくない場合は、Adobe フォントの代わりにこれを使用できます。

カスタム Adob​​e Fonts プラグインをインストールすると、これらのフォントを WordPress サイトに簡単に組み込むことができます。 プラグインをインストールし、Adobe の膨大なフォント ライブラリに移動して、自分に合ったフォントを見つけます (使用するには登録が必要です)。 フォントを選択したら、それをクリックし、ページの右上隅にある [Web プロジェクトに追加] を探します。 フォント ペアを使用すると、フォントの組み合わせがどのように見えるかを確認でき、見たものに基づいてフォントを組み合わせて一致させることができます。 デザイナー自身が作成したカスタム フォントを販売する優れた Web サイトがいくつかあります。 Squirrel フォントには大規模なフォント ライブラリが含まれており、実装も簡単です。 @Font-Face の Web フォント キットを使用できます。

WordPress Web サイトを使用する準備ができているはずです。 このキットには、フォント ファイルと、独自の CSS スタイルシートを作成するために必要なコードを含むスタイルシートが含まれています。 たとえば、OpenSans-ExtraBold- web フォントには次の CSS を使用する必要があります。 最善の解決策は、すべてのフォント ファイルを任意の場所に保存することです。

WordPressでGoogleフォントをロードする方法

WordPress 管理パネルに移動し、[新規追加] を選択します。 Google Play ストアから Easy Google Fonts をダウンロードしてインストールします。 プラグインをインストールしたら、[有効化] ボタンをクリックして使用を開始する必要があります。

ウェブサイトやデジタル製品では、Google フォントを使用して 1,000 を超えるさまざまなフォント ファミリを試すことができます。 WordPress サイトに Google フォントを手動で追加する場合は、いくつかのオプションがあります。 これらは無料でオープンソースであるため、あらゆる開発者が使用できます。 Google フォントを統合する最も便利な方法は、特定のフォント ファミリへの URL を含むスニペットを functions.php ファイルに含めることです。 手動のプロセスが難しい場合は、プラグインを使用できます。 まず、WordPress プラグイン リポジトリにアクセスして、プラグインをインストールできます。 インストールしてアクティブ化する必要があります。

ほとんどの WordPress テーマには、デフォルト設定の一部として Google フォントの統合が含まれています。 OMGF プラットフォームを構成するプラグインを使用すると、Web サイトで 600 を超えるフォントを参照できます。 [フォント ファミリー] ドロップダウン メニューでは、サイトのさまざまなセクションに合わせて 100 を超えるさまざまな種類から選択できます。 カスタマイザのプレビューに表示されているように、カスタム フォント コントロールを追加するためのオプションがいくつかあります。

Google フォントをローカルに WordPress にロードする必要がありますか?

WordPress サイトに Google フォント エラーがある場合は、ローカルで Google フォントを読み込んで解決する必要があります。 制御できない外部リソースとスクリプトがいくつかあり、圧縮、縮小、または最適化が不可能になります。 この予防策を講じないと、WordPress の速度が大幅に低下します。

wp-content/themes/your-theme/fonts

wp-content/themes/your-theme/fonts フォルダーは、テーマで使用するカスタム フォントを保存できる場所です。 フォントは、FTP またはファイル マネージャー プラグインを使用して、このフォルダーに追加できます。 フォントがこのフォルダーに追加されると、フォント名を参照することでテーマの CSS で使用できます。

次のいずれかのテーマを使用している場合、グローバル スタイルを使用して Web サイトのフォントを変更できます。 この場合、基本フォントと見出しフォントは同じフォントのペアです。 新しいフォント ペアを保存するには、[グローバル スタイル] メニューの [公開] ボタンをクリックするか、[リセット] をクリックして変更を元に戻します。 適切なカスタム フォントを選択したら、必要に応じて何度でも変更できます。 見出しまたは基本フォントのサイズを変更する場合は、各フォントの下と右にあるサイズ オプションを選択し、ドロップダウン メニューからサイズを選択します。 カスタム CSS を使用すると、グローバルなデフォルトのフォント サイズを変更できます。 テスト後にプラグインの使用をやめる場合は、必ずプラグインを無効化または削除してください。 Typekit.com アカウントを WordPress.com ブログまたは Web サイトにリンクすることはできません。 特定のフォントと特定の言語との互換性をテストする場合は、カスタマイザーを使用します。

プラグインなしで WordPress にフォントを追加する

プラグインなしで WordPress にフォントを追加する方法はいくつかあります。 1 つの方法は、Google Fonts ライブラリを使用することです。 Google Fonts の Web サイトにアクセスし、使用するフォントを選択して、提供されたコードをコピーするだけです。 次に、WordPress ダッシュボードを開き、[外観] > [カスタマイズ] に移動します。 次に、「Additional CSS」タブをクリックして、Google Fonts からコピーしたコードを貼り付けます。 変更を保存すると、新しいフォントが Web サイトに適用されます。

テーマのデフォルト設定に Web フォントを含める必要はありません。 Web ページを閲覧しているときに、ブラウザを使用してダウンロードすることができます。 フォント コードをコピーしてテーマ ファイルに貼り付けるには、必要なフォントを選択するだけです。 同時に複数のフォントを使用でき、フォントの読み込みにかかる時間を確認できます。 WordPress ブログ ダッシュボードに移動して、WordPress ブログに CSS を追加します。 灰色のボックス 1 のコード全体を本文の Web フォントにコピーします。 新しい Web フォント ファミリーは、 Google フォント ライブラリの 2 番目の灰色のボックスにあります。 さらに、次のコードを使用して、フォント サイズとフォントの太さを調整できます。