WordPressテーマに「正しい」方法でGoogle Webフォントを追加する方法

Googleフォントは、ウェブデザイナーにとってすばらしい無料のリソースです。 WPBv4では、人気のあるGoogleフォントの組み合わせであるOswaldとLoraを使い始めました。一部のユーザーから、WordPressテーマにGoogle Webフォントを追加する方法について質問がありました。覚えていれば、WordPress Post EditorでGoogleフォントを追加する方法を示しました。この記事では、WordPressテーマにGoogle Web Fontsを追加する方法を示します。 正しい方法, パフォーマンスに最適化.


気に入ったGoogle Web Fontsを見つける

あなたがしなければならない最初のことはあなたが好きなGoogleフォントを見つけることです。 Googleフォントにアクセスして、ライブラリを閲覧してください。気に入ったフォントが見つかったら、 「クイック使用」 ボタン.

Google Fontsのフォントをすばやく使用

クイック使用ボタンをクリックすると、新しいページに移動します。ウェブサイトに追加できるコードが記載された使用方法ボックスが表示されるまで下にスクロールします.

Googleフォント埋め込みコード

サイトにフォントを追加するための3つの異なるタブがあることがわかります。 1つ目は、Googleフォントをサイトに追加するための標準的かつ推奨される方法です。 2番目のタブは@import CSSメソッドを使用し、最後のタブはJavaScriptメソッドを利用します.

これらの各方法の使用方法と、長所と短所を示します。.

ビデオチュートリアル

WPBeginnerを購読

ビデオが気に入らない、またはさらに説明が必要な場合は、読み続けてください.

WordPressテーマにGoogle Webフォントを追加する

最初の2つの方法を使用している人々を見てきました.

最も簡単な方法は、テーマを開くことです style.css 次のように、@ importタブで取得したフォントコードをファイルに貼り付けます。

@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Oswald);

複数のフォント要求を1つに結合することもできます。以下にその方法を示します。

@import url(https://fonts.googleapis.com/css?family=Lora|Oswald);

この方法は非常に簡単ですが、WordPressサイトにGoogleフォントを追加する最良の方法ではありません。 @importメソッドを使用すると、並行ダウンロードがブロックされます。つまり、ブラウザは、インポートされたファイルのダウンロードが完了するのを待ってから、残りのコンテンツのダウンロードを開始します。.

@importを使用する必要がある場合は、少なくとも複数のリクエストを1つに結合します.

Google Webフォントを追加するパフォーマンス最適化方法

Googleフォントを追加する最良の方法は、インポートメソッドの代わりにリンクメソッドを利用する標準メソッドを使用することです。手順1で取得したフォントURLを取得するだけです。複数のフォントを追加する場合は、2つのフォントを|で結合できます。キャラクター。次に、コードをテーマのヘッドセクションに配置します.

ほとんどの場合、header.phpファイルを編集し、メインスタイルシートの上に次のコードを貼り付ける必要があります。例は次のようになります。

基本的には、フォントリクエストをできるだけ早く配置することが目標です。 Google Web Fontsブログによると、@ font-face宣言の前にスクリプトタグがある場合、フォントファイルのダウンロードが完了するまで、Internet Explorerはページに何もレンダリングしません.

それが終わったら、次のように、テーマのCSSファイルで使用し始めることができます。

h1 {
font-family: ‘Oswald’、Helvetica、Arial、serif;
}

現在、多くのテーマフレームワークと子テーマがあります。テーマフレームワークを使用している場合は、特別に親テーマのファイルを変更することはお勧めしません。変更は、次にフレームワークを更新するときに上書きされるためです。子テーマに適切にGoogleフォントを追加するには、その親テーマまたはフレームワークによって提示されたフックとフィルターを利用する必要があります.

WordPressでGoogleフォントを適切にエンキューする

WordPressサイトにGoogleフォントを追加するもう1つの方法は、テーマのfunctions.phpファイルまたはサイト固有のプラグインにフォントをエンキューすることです.

function wpb_add_google_fonts(){

wp_enqueue_style( ‘wpb-google-fonts’、 ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’、false);
}

add_action( ‘wp_enqueue_scripts’、 ‘wpb_add_google_fonts’);

フォントリンクを独自のものに置き換えることを忘れないでください.

JavaScriptを使用したGoogleフォントの読み込み

この方法では、Googleフォントの使用手順セクションのJavaScriptタブでコードをコピーする必要があります。このコードをタグの直後にテーマまたは子テーマのheader.phpファイルに貼り付けることができます.

サイトでのGoogle Web Fontsの使用に関する最後のヒントは、使用しないフォントを読み込まないことです。たとえば、太字で通常の太さだけが必要な場合は、他のすべてのスタイルを追加しないでください.

この記事が、WordPressテーマにGoogle Web Fontsを正しく追加し、サイトが高速にロードされるようになったことを願っています。 WordPressにTypekitフォントを追加する方法についてのガイドもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me