WPB（ダブリューピービー）»ブログ»テーマ»WordPressテーマにGoogle Webフォントを「正しく」追加する方法

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

編集スタッフ | 2024年2月7日 | 読者開示

共有数 136 共有 ChatGPT Perplexity LinkedIn WhatsApp メール

WordPressテーマにGoogleウェブフォントを追加したいですか？

Googleフォントを使用すると、WordPressウェブサイトで美しいウェブフォントを簡単に使用できます。これらを使用して、ウェブサイトのタイポグラフィ、ユーザーエクスペリエンス、および美観を向上させることができます。

この記事では、Google WebフォントをWordPressテーマに正しく追加する方法を紹介します。

このガイドで取り上げるトピックの簡単な概要を以下に示します。

WordPressテーマに最適なGoogleフォントを見つける
方法1. プラグインを使用してGoogleフォントをテーマに追加する
方法2. テーマのヘッダーにGoogle Webフォントを追加する
方法3. テーマのスタイルシートにGoogleフォントを追加する
方法4. WordPressでGoogleフォントを適切にエンキューする
ボーナスセクション：WebフォントがWordPressの速度にどのように影響するか

WordPressテーマに最適なGoogleフォントを見つける

まず、お好みのGoogleフォントを見つける必要があります。Google Fontsのウェブサイトにアクセスして、ライブラリを閲覧してください。

お好みのウェブセーフフォントを見つけたら、クリックして利用可能なスタイルを確認してください。

ウェブサイトで使用したいスタイルを選択できます。

次に、「選択したファミリーを表示」ボタンをクリックすると、サイドバーが開きます。

ここから、「ウェブでの使用」セクションの下に使用方法が表示されます。

サイトにフォントを追加するための2つの異なるタブが表示されます

1つ目はリンク方法で、Webフォントを追加する推奨される標準的な方法です。

2番目のタブは、CSSスタイルシートを介してフォントを読み込むことができる@import CSSメソッドを使用しています。

これらの各方法の使い方と、それぞれの長所と短所を説明します。

注意：これらの方法のいくつかは、WordPressのテーマファイルを編集する必要があります。これは、FTPクライアントを使用するか、ホスティングコントロールパネルのファイルマネージャーアプリを使用してウェブサイトに接続することで実行できます。

接続後、/wp-content/themes/Your-Theme-Name/ フォルダにアクセスする必要があります。そこには、このチュートリアルで編集が必要になる可能性のあるテーマファイルがあります。

詳細については、WordPressでコードスニペットをコピーして貼り付ける方法に関するチュートリアルをご覧ください。

方法1. プラグインを使用してGoogleフォントをテーマに追加する

この方法では、Googleフォントを読み込むためにWordPressプラグインを使用します。

まず、Fonts Pluginをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベート後、外観 » カスタマイズページにアクセスしてテーマカスタマイザーを起動する必要があります。ここから、新しいフォントプラグインタブが表示されます。

これをクリックすると、プラグインオプションが表示されます。

ウェブサイトのさまざまな領域にGoogleフォントを使用することを選択できます。

あるいは、WordPressテーマ用にフォントを読み込むだけを選択することもできます。

単純に 高度な設定 » フォントのみ読み込む タブに切り替えます。

ここから、WordPressテーマに読み込みたいGoogleフォントを選択できます。

フォント名を入力して選択するだけです。

終了したら、変更を保存するために公開ボタンをクリックすることを忘れないでください。

プラグインの高度な機能を使用してウェブサイトのさまざまな領域にフォントを割り当てた場合、それらは自動的に機能します。

一方、フォントのみを読み込むことを選択した場合は、それらのためのカスタムCSSルールを追加する必要があります。たとえば、ウェブサイト全体で段落要素にフォントを読み込む方法は次のとおりです。

p { 
font-family: 'Open Sans', sans-serif;
}

方法2. テーマのヘッダーにGoogle Webフォントを追加する

この方法は、GoogleフォントをWordPressテーマに直接追加する最も簡単な方法です。

WordPressテーマまたは子テーマのheader.phpファイルを編集するだけです。その後、WordPressテーマのスタイルシートリンクコードの前にLinkコードをコピーして貼り付けます。

このようになります。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">

基本的な目標は、フォントリクエストをできるだけ早く配置することです。これにより、ユーザーのブラウザはページをレンダリングする前にフォントをダウンロードできます。

それが完了したら、テーマのCSSファイルでフォントを使用できます：

h1 {
    font-family: 'Open Sans',  sans- serif;
}

方法3. テーマのスタイルシートにGoogleフォントを追加する

この方法では、WordPressテーマのメインCSSファイルにフォントCSSをインポートします。

WordPressテーマのルートフォルダにあるstyle.cssファイルを編集し、「@import」タブのコードをCSSファイルの上部に追加するだけです。

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');

これは、デモウェブサイトの style.css ファイルでの表示方法です。

重要: CSSファイルの先頭に@import行を追加してください。

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

先ほど説明した最初の2つの方法は、WordPressのテーマファイルを編集して直接フォントを追加する必要があります。

これは、子テーマを使用してすべての変更を行う場合にうまく機能します。

一方で、メインテーマに変更を加える場合、テーマを更新するたびに変更が失われます。

WordPressテーマで使用するために、Googleフォントを自動的に読み込むコードをプログラムで追加する方が簡単な修正方法です。

これには、サイト固有のプラグインにカスタムコードスニペットを追加するか、カスタムコードプラグインを使用する必要があります。詳細については、WordPressにカスタムコードを追加する方法に関するチュートリアルをご覧ください。

次のコードスニペットをWordPressウェブサイトに追加するだけです。

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' );

注意：追加したいGoogleフォントのURLを必ずGoogleフォントのURLに置き換えてください。

これで完了です。WordPressは、追加したGoogleフォントを自動的に取得するためにリンクメソッドを使用するようになります。

ウェブサイトのソースコードを表示することで確認できます。そこには、Googleフォントのスタイルシートがウェブサイトのフッターセクションに追加されているのが表示されます。

ボーナスセクション：WebフォントがWordPressの速度にどのように影響するか

Googleフォントは、世界中のサーバーロケーションを持つGoogleの巨大なCDNネットワーク経由で配信されるため、非常に高速に読み込まれます。

これらのフォントは数百万のウェブサイトで使用されているため、ユーザーはすでにブラウザのキャッシュに保存している可能性が高いです。

これにより、ウェブサイトの速度へのパフォーマンスへの影響が軽減されます。デザインで1つまたは2つのウェブフォントのみを使用することで、この影響をさらに軽減できます。

その他のヒントについては、初心者向けのWordPressのパフォーマンスと速度に関する完全ガイドをご覧ください。

このガイドがお役に立ち、WordPressテーマにGoogle Webフォントを簡単に追加する方法を学べたことを願っています。また、コーディングなしでゼロからカスタムWordPressテーマを作成する方法に関するガイドや、最高の無料ウェブサイトホスティングサービスのリストもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。

WPBeginnerで現在人気があります！

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

編集スタッフについて

WPBeginnerの編集スタッフは、WordPress、Webホスティング、eコマース、SEO、マーケティングで16年以上の経験を持つSyed Balkhiが率いるWordPress専門家のチームです。2009年に開始されたWPBeginnerは、現在、業界最大の無料WordPressリソースサイトであり、WordPressのWikipediaと呼ばれることもあります。

82件のコメント返信する

イジー・ヴァネック

2024年7月5日午後4時44分

ウェブサイトにフォントをローカルに読み込む方法についての情報を提供していただき、ありがとうございます。長年スピードに苦労し、すべてを最適化しようとしました。ローカルにフォントを読み込むようにアドバイスされたのはこれが初めてのサイトで、本当に効果がありました。わずかミリ秒でしたが、それでもサイトのスピードは向上しました。PageSpeed InsightsやGoogle Search Consoleで、緑とオレンジの違いを生むのは、時にはそのミリ秒です。

返信する
アルマンド

2020年7月9日午後5時35分

このビデオ/手順は2015年のもので、スクリーンショットなどが異なっていることに気づきました。指示通りにヘッダー.phpファイルにGoogleフォントのコードを埋め込もうとすると、エラーが発生しました。このチュートリアルは更新が必要なのでしょうか？よくわかりませんが…ありがとうございます。

返信する
- WPBeginnerサポート
  
  2020年7月10日午前9時01分
  
  フィードバックありがとうございます。可能であれば、この記事の更新を検討いたします。
  
  返信する
  
  管理者
Wout

2019年11月11日午前5時38分

記事ありがとうございます！Googleフォントをエンキューする関数で、fonts.googleapis.com/css… の http: を https: に置き換えて、googleapis.com… への暗号化されたリンクを有効にしてください。

返信する
- WPBeginnerサポート
  
  2019年11月11日午前10時08分
  
  ご指摘ありがとうございます。できるだけ早くリンクを更新いたします。
  
  返信する
  
  管理者
ソフィア

2017年8月19日午前5時18分

これらすべてを学ばなければならない理由が2017年であると確信しています :”((

返信する
チャールズ

2017年8月10日午前3時55分

これはまだ正しい方法ですか？

返信する
レネー

2016年7月19日午後3時41分

フォントは表示されましたが、太字にする方法がわかりません。
CSSでやったことの例を以下に示します。

font-family: "Open Sans", sans-serif; font-weight:bold;

header.phpに追加したリンクに、これを追加しました：

700を太字に置き換えてみましたが、うまくいきませんでした…
何かアイデアはありますか？

事前に感謝します

返信する
- アイザック・アンダーソン
  
  2017年4月13日午後11時16分
  
  「カスタマイズ」タブでフォントを選択した後、Googleフォントで希望するフォントの太さを必ず確認してください。
  
  返信する
ルイ

2016年6月17日午後1時37分

完璧に動作しました！ありがとう。

返信する
ジョシュ

2016年6月13日午前2時28分

は？これのどれが何を意味するのか？投稿やページにGoogleフォントを追加できるようにするにはどうすればすればいいですか？

返信する
シュブハム・クマール

2016年3月28日午前8時05分

ここで説明されているように、Google WebフォントをJavaScriptで非同期にインポートすることについてどう思いますか？

ありがとうございます
Shubham

返信する
ジョーダン

2016年3月22日午後8時20分

簡単な質問です – wp_enqueue_style() のコードリファレンスを確認しました。最初の引数は、スタイルシートの名前を示す文字列です。あなたの例では、最初の引数に 'wpb-google-fonts' を使用しています。私のサイトでは、ここに何を入れるべきかどうすればわかりますか？

返信する
ピート・ローム

2015年12月25日午後11時04分

ヘッダーのどこにコードを貼り付ければいいですか？いつもそう書いてありますが、正確な場所を誰も説明してくれません。

返信する
カーラ・デラウダー

2015年11月1日午後10:49

この関数で「false」は何をしますか？他のエンキューされた関数には含まれていません。

ありがとうございます。

返信する
- ケブ
  
  2015年12月3日午後3時04分
  
  それがヘッダーまたはフッターの引数です。ベストプラクティスとして[ほぼ]すべてのスクリプトをヘッダーに配置するため、デフォルトで「true」=>フッターになりますが、「false」はフッターではなくヘッダーに配置することを意味します。
  
  残念ながら、フォントスクリプトは他のすべての読み込みを停止するため、ヘッダーに配置すると少し厄介です。そのため、この記事では実際に使用するフォントのみを含めるようにすることについて説明しています。逆に、フッターに配置すると、Webフォントが読み込まれるまで、画面の描画中にArialのようなデフォルトフォントが一瞬読み込まれる可能性があります。これはひどい欠点ですが、それが現実です。
  
  サイトでの使用状況に基づいてフォントを条件付きで読み込むという実践をワークフローに取り入れています。たとえば、「太字」がブログ投稿テンプレート（single.php）のh2およびh3でのみ使用される場合、太字スクリプトがsingle.phpテンプレートでのみエンキューされるように条件付きエンキューを記述します。
  
  お役に立てば幸いです。
  
  返信する
  - ケブ
    
    2015年12月3日午後3時10分
    
    また、注意点として。
    
    「太字」とは、特定の太字バージョンのフォントファミリーのことです。<= 参考までに。
    
    返信する
ケネス・ジョン・オドル

2015年7月26日午後8時35分

WordPress 3.3以降、wp_print_stylesは非推奨になりました。

返信する
- ブRAM
  
  2015年8月26日午前7時13分
  
  はい、この記事を更新すべきです。
  
  返信する
  - WPBeginnerサポート
    
    2015年9月6日午後1時44分
    
    更新しました。
    
    返信する
    
    管理者
- WPBeginnerサポート
  
  2015年9月4日午後8時51分
  
  記事を更新しました。適切なwp_enqueue_style関数とwp_enqueue_scriptsアクションフックを使用してGoogleフォントを追加する方法が表示されるようになりました。
  
  返信する
  
  管理者
  - isak
    
    2016年1月6日午後9時25分
    
    functions.php を介して2つのフォントファミリーをエンキューするにはどうすればよいですか？
    
    返信する
4月

2015年7月4日午前3時

Googleフォントを追加するためにPunch Fontsプラグインを使用していますが、見出し1だけを目的のフォントにする方法がわかりません。見出し2〜6にはこのフォントが必要ないので、見出し1にのみGoogleフォントを使用したいです。パラメータにはどのように記述すればよいですか？

現在使用しているのは次のとおりです。Oleo+Script+Swash+Caps:400

返信する
メリッサ

2015年5月11日午後10時25分

さて、もし誰かが行き詰まっているなら、Easy Google Fontsというプラグインもあります。非常に役立ちます。

返信する
メリッサ

2015年5月11日午後3:34

こんにちは、

3つの方法すべてを試しましたが、どれも完全に効果がありませんでした。スタイルシートで指定した他の要素ではなく、一部の要素にのみ適用されるようです。

Googleフォントが適用されていない要素で要素インスペクタを使用すると、次のようになります。
#site-title {
font-family: \’Questrial\’, Helvetica, Arial, sans-serif;

フォントの周りの\\は何を意味しますか？エラーを示しているようですが、何が間違っているのかわかりません。何が原因でしょうか？優先度の高いコードが私のコードを上書きしているのでしょうか？しかし、どこで？どのように？ああ、気が狂いそうです。

返信する
Ali Sajjad

2015年3月18日午前11時30分

編集部様、このサイトのすべてのGoogle Webフォントを追加し、それを私の意味で使用したいのですが、

でもヘッダーファイルにリンクをたくさん使いたくないんです。他に方法はありますか？

返信する
- WPBeginnerサポート
  
  2015年3月18日午後7時22分
  
  使用したいフォントのみを追加してください。
  
  返信する
  
  管理者
アヌラーグ

2014年5月20日午後11時44分

ブログ（http://www.goingtechy.com/）を持っています。サイトがすでに使用しているGoogleフォントのCSS配信を最適化したいのですが、問題が発生しています。サイトにはすでにGoogleフォントがあります。どうすれば最適化できますか？

返信する
サマンサ

2014年5月8日午後1時52分

この投稿を本当にありがとうございます！正式なHTML/CSSトレーニングを受けていない者にとって、この投稿のシンプルさに感銘を受けました。

返信する
タニシャ

2014年3月18日午後3時06分

とても簡単で、完璧に動作しました。ありがとうございます。

返信する
グレッグ

2014年3月13日午前11時36分

こんにちは。

GenesisとParallax Proテーマを使用しています…
しかし、phpなどの初心者です

指示通り、このコードをfunctions.phpファイルに追加しました：
add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

function wpb_add_google_fonts() { echo ”; }

上記のフォントを使用しているヘッダーは変更されません。

質問：
1. 上記のコードを追加するだけでよいと仮定してよろしいでしょうか？
2. コードは具体的にどこに追加すればよいですか？functions.phpの最初ですか、それとも最後ですか？
2. コードに不足しているものはありますか？
3. style.cssファイルにも何か追加する必要がありますか？

ご協力ありがとうございます。
敬具
グレッグ

返信する
- WPBeginnerサポート
  
  2014年3月14日午前11時38分
  
  Greg、私たちには問題ないようです。WordPressはおそらく、あなたがフォントリンクをエコーしたコードの部分を省略したのでしょう。はい、Googleフォントを使用したいセレクターのスタイルルールを設定するにはCSSを使用する必要があります。
  
  返信する
  
  管理者
トニー・ポルト

2014年1月10日午後7時18分

上記のいずれも十分ではありません。私たちは皆、「wp_enqueue_style( ‘google-font’)」が「スクリプトを呼び出すための技術的に正しい方法」であることを知っていますが、この場合、あなたの<headerは次のようになります。

フォント1:
フォント2:
フォント3:
フォント4:

ダメです、こうする必要があります：

返信する
アクマル

2013年12月21日午前11時54分

上記のコードはどこに貼り付ければよいですか？ header.php ファイルのどこにもコードの最後の行が見つかりませんでした。段階的に教えていただけますか？
ありがとうございます。

返信する
- WPBeginnerサポート
  
  2013年12月21日午後2時22分
  
  header.php ファイルの </head> タグの直前にこのコードを貼り付けることができます。
  
  返信する
  
  管理者
サラ

2013年11月25日午後8時18分

以下を再入力しましたが、何も変更されません。

/* フォントのインポート
———————————————————— */

add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

function wpb_add_google_fonts () { echo ‘’; }

/* デフォルト

一度でうまくいきました。とても混乱しています！
助けてくれてありがとう。

返信する
サラ

2013年11月21日午後6:26

こんにちは、

コードをコピーしてフォントを変更したことにとても満足していました。フォントが大きすぎると感じたからです。別のものに変更しようとしたとき、何かを間違えたようで、コードをいじっても1つのフォントスタイルしか表示されなくなりました。技術的なことはわからないので、バカみたいに感じています。誰か助けてもらえませんか？数字が含まれている場合と含まれていない場合の両方で試しました。ありがとうございます。これが私が最後に入力したものです…

/* フォントのインポート
———————————————————— */

1 add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5); 2 3 function wpb_add_google_fonts() { 4 echo ”; 5 }

/* デフォルト
———————————————————— */

返信する
- WPBeginnerサポート
  
  2013年11月22日午前10時51分
  
  コードと一緒に数字を入力しませんでしたか？それとも入力しましたか？
  
  返信する
  
  管理者
  - サラ
    
    2013年11月22日午後11時50分
    
    数字はありませんが、今回は何か足りないようです。これは私のテーブルにあるものとまったく同じです。
    
    add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
    
    function wpb_add_google_fonts() { echo ""; }
    
    返信する
  - サラ
    
    2013年11月28日午前11時14分
    
    コードは…1台のコンピューターでは機能したようです。私が使用している他の2台では機能しませんでした。
    その理由として考えられることをいくつか提案していただけますか？
    
    本当にありがとう
    
    返信する
Karissa Skirmont

2013年11月10日午後2時37分
functions.phpで複数のGoogleフォントを使用するにはどうすればよいですか？

これがありました：
```
//* Enqueue Google fonts
add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
function executive_google_fonts() {
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
}
```
しかし、ダンシングスクリプトが2台目のコンピューターやiPhone、タブレットでフォントとして表示されませんでした。
Open Sansを削除したところ、動作し始めました。
返信する
- WPBeginnerサポート
  
  2013年11月10日午後4:30
  @Karissa、wp_enqueue_style関数の最初の引数は、読み込んでいるスタイルスクリプトのハンドルです。代わりにこのコードを試してください：
```
//* Enqueue Google fonts
add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
function executive_google_fonts() {
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), 20131111 );
	wp_enqueue_style( 'google-font-2', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), 20131111 );
}
```
  WPCodeによって愛情を込めてホストされています
  
  WordPressで1クリックで使用
  返信する
  
  管理者
  - Karissa Skirmont
    
    2013年11月10日午後5時03分
    
    気にしないでください。次のようなリンクを使用する必要があることがわかりました。
    
    ‘//fonts.googleapis.com/css?family=Euphoria+Script|Rouge+Script|Montez|Federo|Great+Vibes|Clicker+Script|Dancing+Script:400,700|Satisfy|Ruthie|Rochester|Open+Sans|Open+Sans+Condensed:300’
    
    返信する
  - Karissa Skirmont
    
    2013年11月10日午後5時33分
    
    ああ、わかりました。ページをリフレッシュしてあなたの返信を見る前に、上に返信しました。
    
    Googleが複数のフォントを選択した際に提供するリンクを使用すると、そのように生成され、サイト上で異なるフォントをライブで簡単に試すことができます。
    
    返信する
Chaitanya

2013年11月6日午後11時41分

本当にありがとうございます!! WordPressのヘルプが必要なときはいつでも、wpbeginnerに直接来ます。なぜなら、ここで最善の解決策を見つけられるとわかっているからです。私のような初心者にとって、どれほど助けになったか、あなたたちは知りません。サポートに感謝します
WPBeginnerよ永遠なれ…

Cheers,
Chaitanya

返信する
ジェニー

2013年10月6日午後2時55分

うーん、インポートを使うのが好きです。怠け者なので手間が省けます～

返信する
- ピート・ローム
  
  2015年12月25日午後11時06分
  
  ここで、各メソッドで作業量が多すぎます。スタイルシートに何かを追加する必要はないはずです。プラグインを見つけてください。
  
  返信する
ジミー・レイノルズ

2013年9月5日午前11時05分

オタクの方法ってことですか？

返信する
mzilverberg

2013年5月25日午前11時36分

ここで私がいくつか見落としていたのは、IE8以下のバージョンでGoogleのWebフォントを機能させるための条件付きコメントです。これは、複数のフォントウェイトをリクエストする場合に必要になります。例として以下のようなものがあります。

そのため、フォントを読み込むための関数を作成しました：https://github.com/mzilverberg/LoadGoogleWebfonts

私のスクリプトは、条件付きコメント内に適切なフォールバックURLも配置します。
数行のコードで、WordPressテーマのfunctions.phpでも同様に動作させることができます。

返信する
グレッグ

2013年4月30日午後3時07分

管理画面にGoogleフォントを追加するにはどうすればよいですか？

返信する
- 編集スタッフ
  
  2013年5月9日午前11時06分
  
  なぜ管理画面にGoogleフォントを追加したいのですか？
  
  返信する
  
  管理者
  - ブルース・スミス
    
    2013年5月23日午後6時09分
    
    管理画面のコンテンツエディタでWYSIWYGを維持するため。ウェブサイトと同じフォントフェイスを管理画面エディタで確認できるようにするため。
    
    返信する
    - ダン・メハー
      
      2013年5月30日午後3時31分
      
      実は私も同じことをどうやるのか疑問に思っていました（そしてこれはGoogleで最初に表示された結果です）。
      
      WYSIWYG エディタに Google Web フォント機能を追加するプラグインが存在することは知っていますが、それらは非常に重くなります。さらに調査して、フォントを1つか2つ簡単に追加する方法があるかどうかを確認します。
マリーン

2012年12月30日午前7時16分

共有いただきありがとうございます。大変満足しております。私はGenesisユーザーで、スタイルシートで既に実装されているため@importを使用し始めました。このソリューションについて、より良い気分になりました。
Happy 2013!

返信する
ジェフ

2012年12月6日午後4時29分

コードの「YOUR THEME STYLESHEET」は何かで置き換えるのですか？
私のものはSTYLE.CSSですが、URLである必要がありますか？
よろしくお願いします。
Jeff

返信する
- 編集スタッフ
  
  2012年12月6日午後8時20分
  
  はい、ここにテーマのstyle.cssパスを挿入する必要があります。
  
  返信する
  
  管理者

Charles

2012年10月16日午後10時06分

これが私が使うものです….

これをテーマのfunctions.phpファイルに追加してください：

/*----------------------------------*/
/* Load CSS Files
/*----------------------------------*/	
	if(!function_exists('load_theme_styles'))
	{
		function load_theme_styles()
		{		
			if (!is_admin()) {
				
				$cssURL = get_template_directory_uri().'/css/';
				$fontURL = 'http://fonts.googleapis.com/css?family=Lora|Oswald';
				
				// Registering New Styles	
				wp_register_style('googleFont', $fontURL);					
				wp_register_style('style', $cssURL.'/style.css', 'googleFont', '1.0', 'screen');
				wp_register_style('print', $cssURL.'/print.css', 'googleFont', '1.0', 'print');
				
				// Enqueing Styles
				wp_enqueue_style('googleFont');	
				wp_enqueue_style('style');
				wp_enqueue_style('print');			
				
			}
		}
	}
	add_action('wp_enqueue_style', 'load_theme_styles');

これについてどう思いますか？

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

WordPressテーマに最適なGoogleフォントを見つける

方法1. プラグインを使用してGoogleフォントをテーマに追加する

方法2. テーマのヘッダーにGoogle Webフォントを追加する

方法3. テーマのスタイルシートにGoogleフォントを追加する

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

ボーナスセクション：WebフォントがWordPressの速度にどのように影響するか

編集スタッフについて

82件のコメント返信する

返信する返信をキャンセル

WPBeginner®について

WordPressテーマに最適なGoogleフォントを見つける

方法1. プラグインを使用してGoogleフォントをテーマに追加する

方法2. テーマのヘッダーにGoogle Webフォントを追加する

方法3. テーマのスタイルシートにGoogleフォントを追加する

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

ボーナスセクション：WebフォントがWordPressの速度にどのように影響するか

編集スタッフについて

読者とのインタラクション

82件のコメント返信する

返信する返信をキャンセル