WordPressにカスタムフォントを追加したいですか？カスタムフォントは、多様で美しいフォントを使用できるようにすることで、ウェブサイトのタイポグラフィとユーザーエクスペリエンスを向上させます。
WPBeginnerでは、多くのパートナーウェブサイトにカスタムフォントを追加しており、それがサイトの視覚的な魅力をどれだけ高めるかを知っています。
カスタムフォントは、見た目が良いだけでなく、可読性を向上させ、ブランドイメージを作成し、ユーザーがあなたのWordPressウェブサイトに滞在する時間を増やすのに役立ちます。
この記事では、Google Fonts、TypeKit、およびCSS3の@Font-Faceメソッドを使用してWordPressにカスタムフォントを追加する方法を説明します。
注意:フォントをロードしすぎると、ウェブサイトの速度が低下する可能性があります。2つのフォントを選択し、それらをウェブサイト全体で使用することをお勧めします。ウェブサイトの速度を低下させることなく、それらを正しくロードする方法も示します。
WordPressにカスタムフォントを追加する方法を見る前に、まず使用できるカスタムフォントの見つけ方を見てみましょう。
WordPressで使用するカスタムフォントの見つけ方
フォントはかつては高価でしたが、もうそうではありません。 Google Fonts、Adobe Fonts（旧Typekit）、FontSquirrel、fonts.comなど、素晴らしい無料のウェブフォントを見つけられる場所がたくさんあります。
フォントの組み合わせ方がわからない場合は、Font Pairを試してみてください。デザイナーが美しいGoogleフォントをペアにするのに役立ちます。
フォントを選択する際は、カスタムフォントを使いすぎるとウェブサイトの表示速度が遅くなることを覚えておいてください。そのため、2つのフォントを選択し、デザイン全体で使用することをお勧めします。これにより、WordPressのデザインにも一貫性が生まれます。
それでは、WordPressにカスタムフォントを追加する方法を見ていきましょう。このチュートリアルでは以下の内容をカバーします。
- WordPressにGoogle Fontsからカスタムフォントを追加する
- Adobe Fontsを使用してWordPressにカスタムフォントを追加する
- CSS3 @font-face を使用して WordPress にカスタムフォントを追加する
WordPressにGoogle Fontsからカスタムフォントを追加する
Google Fontsは、ウェブサイト開発者の間で最も大きく、無料で、最も一般的に使用されているフォントライブラリです。WordPressでGoogle Fontsを追加して使用する方法は複数あります。
方法1：WordPressプラグインを使用してGoogleフォントを追加する
ウェブサイトにGoogleフォントを追加して使用したい場合は、この方法が最も簡単で初心者におすすめです。
まず最初に行うべきことは、Google Fonts Typography プラグインをインストールして有効化することです。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
セール：プラグインのプレミアムバージョンを入手したい場合は、Google Fonts for WordPressクーポンを使用して20％割引を入手してください。これにより、WordPressテーマのフォントの色やサイズなどを変更できます。
有効化すると、公式のクイックスタートガイドを受け取るために、メールアドレスを入力する機会が与えられます。
次に、管理画面のサイドバーにある**フォントプラグイン » フォントのカスタマイズ**をクリックする必要があります。
これにより、WordPress テーマカスタマイザーに自動的に移動し、「フォントプラグイン」セクションが自動的に開きます。
ここでは、「基本設定」セクションでウェブサイトのデフォルトフォントを選択し、「詳細設定」の下でウェブサイトの特定のパーツのフォントを選択できます。
まず「基本設定」をクリックしましょう。ここで、コンテンツ、見出し、ボタン、フィールドのフォントを選択できます。
「フォントファミリー」のドロップダウンメニューで新しいフォントを選択できます。一番上にデフォルトのフォント、次にシステムフォント、そして1455以上のGoogleフォントの巨大なリストがあります。
新しいフォントを選択すると、プレビューが自動的に変更され、どのように表示されるかがわかります。
これで、プラグインの高度な設定を使用してフォントの選択を微調整できます。
ページ左上の「＜」バックアローボタンをクリックし、「詳細設定」セクションをクリックする必要があります。
ここでは、サイトのタイトル、ナビゲーションメニュー、コンテンツエリア、サイドバー、フッターなど、ウェブサイトのさまざまなセクションの設定が見つかります。
例えば、「コンテンツ」セクションでは、さまざまな見出しレベルや引用のフォントを変更するオプションが表示されます。
ドロップダウンメニューから使用したいカスタムフォントを選択できます。
同様に、サイドバー領域のカスタムフォントを選択できます。
単純にバックボタンをクリックして、「サイドバー」設定に入ります。そこには、サイドバーの見出しとコンテンツのフォントを選択するためのドロップダウンメニューがあります。
カスタムフォントの選択に満足したら、「公開」ボタンをクリックして変更を保存してください。
方法2：WordPressにGoogleフォントを手動で追加する
この方法では、WordPressのテーマファイルにコードを追加する必要があります。以前にこれをやったことがない場合は、WordPressでコードをコピー＆ペーストする方法に関するガイドを参照してください。
まず、Google Fonts ライブラリにアクセスし、使用したいフォントを選択します。フォントページで、そのフォントで利用可能なスタイルが表示されます。
プロジェクトで使用したいスタイルを選択し、上部にある「選択したファミリーを表示」ボタンをクリックします。
これにより、埋め込みコードをコピーできるサイドバーが開きます。
このコードをWordPressサイトに追加するには、2つの方法があります。
まず、テーマのheader.phpファイルを編集し、<body>タグの前にコードを貼り付けます。
ただし、WordPressでのコード編集に慣れていない場合は、プラグインを使用してこのコードを簡単に追加できます。
WPCodeプラグインをインストールして有効化するだけです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。WordPressプラグインのインストール方法。
有効化したら、Code Snippets » Header & Footerページに移動し、埋め込みコードを「Header」ボックスに貼り付けます。
変更を保存するには、「変更を保存」ボタンをクリックしてください。プラグインは、ウェブサイトのすべてのページにGoogleフォントの埋め込みコードの読み込みを開始します。
次のように、テーマのスタイルシートでこのフォントを使用できます。
.h1 site-title {
font-family: 'Open Sans', Arial, sans-serif;
}
詳細については、WordPressテーマにGoogleフォントを追加する方法に関するガイドをご覧ください。WordPressにGoogleフォントを追加する方法。
Adobe Fontsを使用してWordPressにカスタムフォントを追加する
Typekit として知られていた Adobe Fonts は、デザインプロジェクトで使用できる素晴らしいフォントの無料およびプレミアムリソースです。有料サブスクリプションと、使用できる限定的な無料プランがあります。
Adobe Fontsアカウントにサインアップし、「フォントをブラウズ」セクションにアクセスするだけです。ここから、</>ボタンをクリックしてフォントを選択し、プロジェクトを作成します。
次に、プロジェクトIDが表示された埋め込みコードが表示されます。また、テーマのCSSでフォントを使用する方法も表示されます。
このコードをコピーして、ウェブサイトの<head>セクションに貼り付ける必要があります。
このコードをWordPressサイトに追加するには、2つの方法があります。
まず、テーマのheader.phpファイルを編集し、<body>タグの前にコードを貼り付けます。
ただし、WordPressでのコード編集に慣れていない場合は、プラグインを使用してこのコードを追加できます。無料のWPCodeプラグインをインストールして有効化するだけです。
有効化したら、コードスニペット » ヘッダー＆フッターページに移動し、埋め込みコードを「ヘッダー」ボックスに貼り付けます。その後、「変更を保存」ボタンをクリックします。
これで、WordPressテーマのスタイルシートで選択したTypekitフォントを次のように使用できます。
h1 .site-title {
font-family: gilbert, sans-serif;
}
より詳細な手順については、Adobe Font (Typekit) を使用してWordPressに素晴らしいタイポグラフィを追加する方法のチュートリアルをご覧ください。
CSS3 @font-face を使用して WordPress にカスタムフォントを追加する
WordPressにカスタムフォントを追加する最も直接的な方法は、CSS3の@font-faceメソッドを使用してフォントを追加することです。この方法を使用すると、ウェブサイトで好きなフォントを使用できます。
まず、お好みのフォントを Web 形式でダウンロードする必要があります。フォントの Web 形式がない場合は、FontSquirrel Webfont Generator を使用して変換できます。
Webフォントファイルを入手したら、それらをWordPressホスティングサーバーにアップロードする必要があります。フォントをアップロードするのに最適な場所は、テーマまたは子テーマのディレクトリ内にある新しい「fonts」フォルダです。
FTPまたはcPanelのファイルマネージャーを使用してフォントをアップロードできます。
フォントをアップロードしたら、次のようにCSS3の@font-faceルールを使用してテーマのスタイルシートにフォントを読み込む必要があります。
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
フォントファミリーとURLをご自身のものに置き換えるのを忘れないでください。
その後、テーマのスタイルシートのどこでもこのようフォントを使用できます。
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}
CSS3の@font-faceを使用してフォントを直接読み込むことは、常に最善の解決策とは限りません。例えば、Google FontsやTypekitのフォントを使用している場合、最適なパフォーマンスを得るためには、それらのサーバーから直接フォントを提供するのが最善です。
このチュートリアルでWordPressにカスタムフォントを追加する方法を学べたことを願っています。また、WordPressウェブサイトの配色をカスタマイズする方法を学んだり、おすすめのドラッグ＆ドロップWordPressページビルダーのリストを確認したりすることもできます。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
デニス・ムトミ
クライアントのために、方法1で言及されているGoogle Fonts Typographyプラグインを使用しましたが、非常に役立ちました。考慮すべき点としては、サイトの読み込み速度への影響です。フォントのサブセット（例：ラテン文字のみ）を選択することで、希望する見た目を維持しながら、読み込み時間を大幅に短縮できます。
WPBeginner コメント
どちらの場合もレンダリング速度は同じになります。
Kushal Phalak
カスタムフォントなしではやっていけません。カスタムフォントを使用しないと、何かが不完全なように感じます。デザイナー兼開発者として、私のブランドは細心の注意を払って作成したいと考えています。それが最も重要なステップであり、どのフォントを使用しても気分が良くありません。デフォルトのフォントの中には良いものがあることは知っていますが、それらには十分なバリエーションがありません。WordPressでは、この機能は組み込みであるべきだと思います。これにより、カスタムフォントを追加する手間が省けます。
WPBeginnerサポート
It would depend on the theme but maybe in the future there will be an easier way
管理者
イジー・ヴァネック
有益な記事をありがとうございます。私たちの言語には特定の専門用語や特徴があります。チェコ語では、ěščřžのような文字を使用します。これらの文字を考慮し、異なる表示をしないフォントを見つけるのが非常に困難な場合があります。そのため、チェコ語での記述という永遠の問題を最終的に解決するのに役立つこのガイドに感謝します。
Jozef Fekete
As a Slovak I know exactly what you are talking about
In cases like this, it is advisable to use a filter to make searching for a suitable font easier. For example, look for fonts in the “Latin extended” category that support Czech and Slovak language.
イジー・ヴァネック
それは良いアドバイスです。ありがとうございます。すでにいくつかの文字を追跡しました。しかし、一部の顧客はそれに満足しておらず、装飾的なものを求めています。あなたの検索アドバイスを試してみます。
モイヌディン・ワヒード
Googleフォントには非常に優れたものがたくさんあり、多くのトップ開発者が使用しています。
私はしばらくの間、PoppinsとRobotoのファンで、静的サイトやWordPressサイトでも使用してきました。
Googleフォントをローカルライブラリから使用すると言う人たちを見てきました。
それが何を意味するのか分かりません。
サーバーから取得するとウェブサイトの速度が低下する可能性があると彼らは主張しています。
もしそうなら、これらがGoogleフォントであるという事実を考慮して、どのようにしてこれらのフォントを独自のローカルライブラリから追加できるのでしょうか？
WPBeginnerサポート
私たちのガイドにあるプラグインには、フォントファイルをローカルでホストするオプションがあります。ファイルをローカルでホストしない場合、サイトでそのフォントを表示するために、ユーザーはGoogleからフォントが読み込まれるのを待つ必要があります。
管理者
モイヌディン・ワヒード
ローカルにフォントを保持するためのガイドをありがとうございます。
速度の点から、Googleから取得するのはあまり良い考えではありません。Googleフォントを使用する際は、ローカルに保持することを念頭に置きます。
イジー・ヴァネック
フォントがローカルで使用される場合、それはウェブ上に保存されていることを意味します。つまり、WordPressと同様にFTP上にあります。これは、そうしないとWordPressがフォントのためにGoogleサーバーにアクセスする必要があり、サイトの応答が遅くなるためです。さらに、Googleのサーバーが現在遅い場合があり、これが速度に影響を与える可能性があります。Pagespeed InsightやGTmetrixのような測定ツールにウェブサイトを配置すると、Googleサーバーからフォントを読み込むのにどれくらいの時間がかかるかがわかります。したがって、サイトの応答性とメトリクスの両方を改善するために、フォントをローカルにアップロードするのが一般的なプラクティスです。私もそのようにしています。
Ahmed Omar
有益な記事をありがとうございました。
ラップトップではフォントが正しく表示されるのに、携帯電話では表示されないのはなぜかわかりますか？
WPBeginnerサポート
最も可能性の高い理由は、テーマがモバイルデバイスのスタイリングを上書きしている場合です。テーマのサポートに確認すれば、支援を得られるはずです。
管理者
ブレイデン・フレイザー
これを行うにはビジネスWordPressメンバーである必要があると言えばよかったのに。誤解を招く。
WPBeginnerサポート
当社のコンテンツはすべてWordPress.orgサイト向けです。お客様はWordPress.comをご利用中ですので、両者の比較については以下の記事をご覧ください。
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
Tarun Kashyap
このサイトではどのフォントを使用していますか？とても魅力的ですね。
WPBeginnerサポート
We’re currently using Proxima Nova
管理者
Joshua
あなたのブログのために、そのような美しいアニメーション写真を作成する方法を教えていただけますか？どのソフトウェアを使用していますか？
WPBeginnerサポート
There are multiple tools, for the moment you may want to take a look at Recordit for an option for creating a GIF
管理者
Manuel
ありがとうございます。WordPressで@font-faceを試していましたが、フォントが表示されなかったので、フォントをテーマディレクトリ内に配置するという推奨事項に従ったところ、うまくいきました！
WPBeginnerサポート
Glad our recommendation could help
管理者
ロシュニ・カンチャン
有益な記事をありがとうございました。
ラップトップではフォントが正しく表示されるのに、携帯電話では表示されないのはなぜかわかりますか？
WPBeginnerサポート
お使いの特定のテーマには、追加したフォントを上書きするデバイス固有のCSSがある可能性があります。テーマのサポートに確認すれば、教えてくれるはずです。
管理者
Vlad
ありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
Katherine
この簡単なビデオを作成していただきありがとうございます。2番目の方法で数分でフォントを修正できました。テーマのコードをいじる時間を大幅に節約できました。大変感謝しています！
WPBeginnerサポート
Katherineさん、こんにちは。
どういたしまして。お役に立てて光栄です。
管理者
または
こんにちは、私のフォントはGoogleフォントではありません。font faceを使用してアップロードしましたが、テーマのカスタマイザーに表示されません。何かアドバイスはありますか？
giri
こんにちは、あなたの投稿から本当に多くの価値を得ました。いくつか簡単な質問があります。
1. ブロガーが超えないべきプラグインの数はいくつですか？現在約18個インストールしていますが、その数は常軌を逸していると考えますか？私のサイトも確認して、
2. あなたのフォントは本当に美しいです。あなたのような美しいフォントを提供するプラグインをお勧めしてもらえますか？
最後に、数秒時間を割いていただけますか？
WPBeginnerサポート
こんにちは、ギリさん、
1. WordPressサイトにインストールすべきプラグインの数に関する記事をご覧ください。WordPressサイトにインストールすべきプラグインの数。
2. フォントについては、WordPressの最高のタイポグラフィプラグインを参照してください。
管理者
Roshani
font-faceにカスタムフォントのURLをアップロードしましたが、開発者ツールで404エラーが表示されます。ウェブページを読み込む前に、通常のフォントで表示されます。
助けてください
Chamnan
Googleフォントを使用中にKhmerフォントで問題が発生しています。一部のテキストが記号で表示されるという問題です。
ahmed aboubakr
あなたのチュートリアルに感謝します、本当に助かります、そしてあなたの親切な努力に感謝します。
ファドル
OK、気にしないでください…カスタムCSSフィールドから@font-faceコードを削除することで解決できました。
Amy
これは私がこれまでに見つけた、フォントを追加するための最高のガイドです。すべての方法が1か所にまとめられており、各方法は簡単に実行できます。GoogleやTypekit以外のカスタムフォントを追加する方法を調べるために、過去数日間インターネットを検索していましたが、ようやく簡単なガイドを見つけました。ありがとうございます！
アンバー
OK、Font Squirrelを使用して@font-faceキットを入手しました。Sitegroundのテーマにアップロードしました。次に、WP Editor -> FontsのURLを変更しました。私がやったことの例を次に示します。
@font-face { font-family: ‘walpurgis_nightregular’; src: url(‘www.example.com/public_html/wp-content/themes/pique/fonts/walpurgisnight-regular-webfont.woff2’) format(‘woff2’), url(‘www.wanderlustconqueror.com/public_html/wp-content/themes/pique/fonts/walpurgisnight-regular-webfont.woff’) format(‘woff’); font-weight: normal; font-style: normal;
}
これを行っても、フォントはカスタマイズオプションの「タイポグラフィ」セクションに表示されません。「追加 CSS エディター」にも追加する必要があるのではないかと思い、そこにも追加しました。しかし、それも機能しないようでした。
ヘッダーに自分のフォントを使えるようになりたいだけです。ここで何が間違っているのでしょうか？このチュートリアルは初心者向けのはずなのに、とても馬鹿げた気分になります。何か手順を飛ばしていますか？フォントフェイスオプションだけを使うための、もっと詳細なチュートリアルはありますか？助けてください！
WPBeginnerサポート
Amberさん、こんにちは。
確信が持てません。上記の手順をもう一度お試しください。
管理者
Dan
Amberさんと同じような問題を抱えています。ステップバイステップの説明に従ったにもかかわらず、フォントが読み込まれません。
私はtwenty seventeenテーマをベースにしたカスタムテーマを使用しています。私のCSSファイルはwp-content/themes/twentyseventeen-childにあります。ここにフォントも配置しました。CSSファイルには以下の内容があります。
しかし、私のサイトではこのフォントがまだ表示されません！何が間違っていますか？
Syed Abbas Ali Shah
私も質問があります。.ttfファイルをアップロードしました。
publichtml/folder-name-of-web/wp-content/theme/font
そして、WordPressエディタのテーマのスタイルシートCSSにフォントの名前を追加しました。しかし、フォントが認識されません。
解決策を教えてください。
Raghava
貴重な情報ありがとうございます。試してみましたが、うまく動作しています。Googleから2つのフォントを使用しましたが、Googleフォントを使用するとウェブサイトのパフォーマンスが少し遅くなります。
WordPressに直接フォントをアップロードする方法を詳しく投稿していただけると幸いです。
Thanks,
Raghava
Allix
購入したフォントの特殊文字である「グリフ」をPhotoshopで表示している場合、そのグリフをPhotoshopに転送するにはどうすればよいですか？
ありがとうございます！
dsb
くだらない質問だと思います！でも、URLの「your theme」の部分は、私たちのテーマのタイトルに置き換えるということで合っていますか？それとも、その部分はそのままにしておくのでしょうか？
また、フォント名が長い場合、スペースを入れるだけで良いのでしょうか、それともプラス記号などを追加する必要があるのでしょうか？
例えば、
@font-face { font-family: Arvo example one; src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo example one-Regular.ttf); font-weight: normal; }1-click Use in WordPress
本当にありがとうございます
WPBeginnerサポート
dsbさん、こんにちは。
はい、your-theme を実際のテーマフォルダーの名前に置き換える必要があります。フォントを現在のテーマのフォントディレクトリにアップロードした場合、フォントファイルの名前を確認できます。または、ファイル名をコピーしてCSSに貼り付けるだけです。
管理者
ヴィンセント
「フォントをアップロードするのに最適な場所は、テーマまたは子テーマのディレクトリ内にある新しい「fonts」フォルダーです。」
なぜここが正確に最高の場所なのですか？単一のフォントのために子テーマを作成するのは少し面倒ですが、テーマ自体にアップロードすると、テーマが更新されたときに消えてしまう可能性がありますよね？それとも、技術的には無関係なファイルなので、それから安全なのでしょうか？
アンドリュー
何のために使用しているかに関わらず、子テーマがないのは一般的に愚かだと思います。
そして、テーマがアップデートされた場合、安全ではありません。アップデートによって上書きされます。
DaVince
> 一般的に、何のために使用しているかに関わらず、子テーマがないのは愚かだと私は言うでしょう。
なぜそう思われるのですか？ テーマをどのような形でも一切変更しない場合を考えてみてください。この場合、子テーマを実行することは完全に無意味であり、すべての上にさらに別のコード層を追加することになります。
> そして、テーマがアップデートされた場合、安全ではありません。アップデートによって上書きされてしまいます。
なんとなくわかりました。この記事で強調されるべきだと思います。そうしないと、一部の人が不満を感じるでしょう。
Shah
こんにちは、
テーマのどこにでもカスタムフォントを追加するのに問題はありませんが、wp-embed-template.phpでフォントを変更しようとしたときにカスタムフォントが機能しませんでした。つまり、@font-facedになっていないかのようです。
WordPressの埋め込み部分のフォントを変更するのを手伝ってもらえませんか？phpに@font-faceを再度追加する必要がありますか？すでに追加されていますが！
事前に感謝いたします。
ロビン
ご協力いただきありがとうございます！
フォントをフォルダーにアップロードしたら、これをCSSに追加しますか？既存のフォントファミリーはそのままにしますか？なぜなら、私はそれを主に使っているからです。これは特別な機会にのみ使用される特殊なフォントです。
とても混乱しています。
アリス
Really great! Been struggling a while (I’m quite new to all this) but now it works
Thanks a lot!
Nicole
こんにちは。これについてありがとうございます。フォントのライセンス情報はどのように見つけられますか？一部のフォントはウェブ上にたくさんありますが、それを使いたいのですが、EULA情報を見つけるのが難しいです。
ヴィンセント
通常、フォント自体のメタデータに含まれています。Windowsでは、右クリックしてフォントのプロパティを表示できます。それでも十分でない場合は、フォントのメタデータを表示できるフル機能のフォントビューアをダウンロードすることをお勧めします。
Andrea
こんにちは、WordPressにフォントをインストールするにはどの拡張機能を使用すればよいですか？
自分のものをインストールしようとして問題が発生しているため
マイク
皆さん、最後のテクニック（@fontface）を使用しました。フォントはWordPressに追加されましたが、デフォルトのフォントになってしまいました。フォントリストのオプションとしてのみ使用したかったのですが、手伝ってもらえますか？
ep
CSSの@font-faceメソッドを使用しました。驚くほどうまくいきました。ありがとうございます。
Abdul Manan Abbasi
アッサラーム・アライクム！
私はWordPress初心者です。ウェブサイトにNoori Nastaleeqフォントを追加したいのですが、どのようにすればよいでしょうか。ご協力をお願いします。
Ildiko
これらの方法のパフォーマンス比較を提供していただけますか？
Asiyah
こんにちは、
WordPressは全くの初心者なので、助けていただけると嬉しいです。Bluehostでカスタムドメインを購入し、WordPressをインストールし、最後にSo Simpleテーマをインストールして有効化しました。将来テーマをアップデートした場合、フォントの変更は失われますか？もしそうなら、それを防ぐ方法はありますか？
他の多くのサイトでは、まずカスタム CSS プラグインを追加することを推奨していることに気づきましたが、その方法が全くわかりません。
Kind regards
WPBeginnerサポート
WordPressサイトにカスタムCSSを簡単に追加する方法に関するガイドをご覧ください。WordPressサイトにカスタムCSSを簡単に追加する方法。
管理者
Vikram
本当にありがとうございます。助かりました。
ハシム・ナウシャヒ
本当に役立ちました！どうもありがとうございました！！！
ちょっとした質問ですが…
異なるウェイトのフォントがある場合、コードをどのように調整すればよいですか？
ラップトップにレギュラーとボールドのフォントバージョンをインストールしました。FontSquirrel を使用してそれらを Web フォントに変換しました。そして、説明にあったように、それらの Web フォントを子テーマのフォルダにアップロードしました。@font-face を使用して両方のウェイトを使用する方法がわかりません。
返信を楽しみにしています。説明がとても分かりやすかったです！
事前に感謝いたします！
敬具
Hashim
WPBeginnerサポート
CSS で font-weight を使用します。次のようにします。
h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }1-click Use in WordPress
管理者
Christina
外観の下のWordPressに「エディター」ボタンが表示されません。フォントをアップロードするためにFont Squirrelを使用しましたが、テーマエディターに追加するオプションがありませんでした。WordPressのバージョンが違うのかもしれません。助けてください。ありがとうございます。
Michelle
@fontfaceの例のURLソースのサンプルを教えていただけますか？何か間違っていて、髪の毛をすべて引き抜きたくなっています：/
Mr.T
Googleフォントをカスタムで追加する正しい方法は、enqueue_script関数を使用することではありませんか？
WPBeginnerサポート
理想的ですが、必須ではありません。この方法も正しいですし、初心者にはより簡単です。
管理者
ジェームズ
こんにちは皆さん
いつもあなたの投稿を読んでいます。このサイトは素晴らしいですね。いつも助けてくれます。顧客のためにサイトを移動するのに苦労していて、フォントを変更する必要がありました。すべてやったと思ったのですが、CSSファイルをコピーするなどしましたが、ヘッダーのコードを変更していないことに気づいたのは、これを読んだからです。
1週間もこの問題で立ち往生しています！
Anyway just wanted to say thanks