WordPressでカスタムフォントを追加する方法

WordPressにカスタムフォントを追加しますか?カスタムフォントを使用すると、Webサイトでさまざまなフォントの美しい組み合わせを使用して、タイポグラフィとユーザーエクスペリエンスを向上させることができます。.


見栄えが良いだけでなく、カスタムフォントは読みやすさの向上、ブランドイメージの作成、ユーザーのWebサイト滞在時間の増加にも役立ちます.

この記事では、Google Fonts、TypeKit、CSS3 @ Font-Faceメソッドを使用してWordPressにカスタムフォントを追加する方法を示します.

WordPressでカスタムフォントを追加する

注意: 読み込むフォントが多すぎると、ウェブサイトの速度が低下する可能性があります。 2つのフォントを選択し、Webサイト全体で使用することをお勧めします。また、ウェブサイトの速度を落とさずに適切にロードする方法についても説明します.

WordPressでカスタムフォントを追加する方法を見る前に、使用できるカスタムフォントを見つけることを見てみましょう.

WordPressで使用するカスタムフォントを見つける方法

フォントは以前は高価でしたが、それ以上ではありませんでした。 Google Fonts、Typekit、FontSquirrel、fonts.comなどの優れた無料のWebフォントを見つける場所はたくさんあります.

フォントを組み合わせる方法がわからない場合は、フォントペアを試してください。デザイナーが美しいGoogleフォントを組み合わせるのに役立ちます.

フォントを選択する際、使用するカスタムフォントが多すぎると、Webサイトの速度が低下することに注意してください。このため、2つのフォントを選択し、デザイン全体で使用する必要があります。これにより、設計に一貫性がもたらされます.

ビデオチュートリアル

WPBeginnerを購読

ビデオが気に入らない場合、または書面によるガイドを好む場合は、読み続けてください.

GoogleフォントからWordPressにカスタムフォントを追加する

Googleフォントのプレビュー

Google Fontsは、ウェブサイト開発者の間で最大かつ無料で、最も一般的に使用されているフォントライブラリです。 WordPressでGoogleフォントを追加して使用する方法はいくつかあります.

方法1:Easy Google Fontsプラグインを使用してカスタムフォントを追加する

ウェブサイトにGoogleフォントを追加して使用したい場合は、この方法が最も簡単で、初心者におすすめです。.

最初に行う必要があるのは、Easy Google Fontsプラグインをインストールしてアクティブにすることです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

アクティベーションが完了すると、 外観»カスタマイザ ページ。ライブテーマカスタマイザのインターフェースが開き、新しいタイポグラフィセクションが表示されます.

カスタマイザタイポグラフィ

タイポグラフィをクリックすると、Googleフォントを適用できるWebサイトのさまざまなセクションが表示されます。編集するセクションの下にある[フォントの編集]をクリックするだけです.

タイポグラフィの設定

フォントファミリーセクションでは、ウェブサイトで使用するGoogleフォントを選択できます。フォントスタイル、フォントサイズ、パディング、マージンなども選択できます.

テーマによっては、ここに表示されるセクションの数が制限される可能性があり、Webサイトのさまざまな領域のフォント選択を直接変更できない場合があります.

これを修正するために、プラグインを使用して独自のコントロールを作成し、それらを使用してWebサイトのフォントを変更することもできます.

まず、訪問する必要があります 設定»Googleフォント ページにアクセスし、フォントコントロールの名前を入力します。このフォントコントロールを使用する場所をすばやく理解できるものを使用してください.

フォント制御セクション

次に、[フォントコントロールを作成]ボタンをクリックすると、CSSセレクターの入力を求められます.

ターゲットとするHTML要素(たとえば、h1、h2、p、blockquote)を追加するか、CSSクラスを使用できます。.

ブラウザの検査ツールを使用して、変更する特定の領域で使用されているCSSクラスを確認できます.

CSSセレクターを追加する

[フォントコントロールを保存]ボタンをクリックして、設定を保存します。 Webサイトのさまざまなセクションに必要な数のフォントコントローラーを作成できます.

これらのフォントコントローラーを使用するには、 外観»カスタマイザ そして、タイポグラフィタブをクリックします.

タイポグラフィの下に、「テーマタイポグラフィ」オプションも表示されます。それをクリックすると、以前に作成したカスタムフォントコントロールが表示されます。編集ボタンをクリックするだけで、このコントロールのフォントと外観を選択できます.

テーマのタイポグラフィオプション

変更を保存するには、必ず[保存]または[公開]ボタンをクリックしてください.

方法2:WordPressでGoogleフォントを手動で追加する

この方法では、WordPressテーマファイルにコードを追加する必要があります。これまでに行ったことがない場合は、WordPressでコードをコピーして貼り付ける方法に関するガイドをご覧ください。.

まず、Googleフォントライブラリにアクセスして、使用するフォントを選択します。次に、フォントの下のクイック使用ボタンをクリックします.

使用するフォントスタイルを選択します

フォントページに、そのフォントで使用できるスタイルが表示されます。プロジェクトで使用するスタイルを選択し、上部にあるサイドバーボタンをクリックします.

フォント埋め込みリンクを取得する

次に、サイドバーの[埋め込み]タブに切り替えて、埋め込みコードをコピーする必要があります.

このコードをWordPressサイトに追加する方法は2つあります.

まず、テーマのheader.phpファイルを編集して、タグの前にコードを貼り付けるだけです。.

ただし、WordPressでのコード編集に慣れていない場合は、プラグインを使用してこのコードを追加できます。.

ヘッダーとフッターの挿入プラグインをインストールしてアクティブ化するだけです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

有効化したら、 設定»ヘッダーとフッターの挿入 埋め込みコードを[Scripts in header]ボックスに貼り付けます.

WordPressサイトにフォントコードを追加する

変更を保存するには、必ず[保存]ボタンをクリックしてください。プラグインは、ウェブサイトのすべてのページでGoogle Font埋め込みコードの読み込みを開始します.

このフォントは、次のようにテーマのスタイルシートで使用できます。

.h1サイトタイトル{
font-family: ‘Open Sans’、Arial、sans-serif;
}

詳細な手順については、WordPressテーマにGoogleフォントを追加する方法に関するガイドを参照してください.

Typekitを使用してWordPressにカスタムフォントを追加する

Typekit Adob​​eフォント

Adobe FontsのTypekitは、デザインプロジェクトで使用できる素晴らしいフォントの無料のプレミアムリソースです。彼らはあなたが使用できる有料サブスクリプションと限られた無料プランを持っています.

Adobe Fontsアカウントにサインアップして、フォントの参照セクションにアクセスするだけです。ここから、ボタンをクリックしてフォントを選択し、プロジェクトを作成する必要があります.

タイプキットフォントをプロジェクトに追加する

次に、プロジェクトIDが埋め込まれたコードが表示されます。また、テーマのCSSでフォントを使用する方法も示します.

このコードをコピーして、ウェブサイトのセクション内に貼り付ける必要があります.

Typekitフォントの埋め込みコード

このコードをWordPressサイトに追加する方法は2つあります.

まず、テーマのheader.phpファイルを編集して、タグの前にコードを貼り付けるだけです。.

ただし、WordPressでのコード編集に慣れていない場合は、プラグインを使用してこのコードを追加できます。.

ヘッダーとフッターの挿入プラグインをインストールしてアクティブ化するだけです.

有効化したら、 設定»ヘッダーとフッターの挿入 埋め込みコードを[Scripts in header]ボックスに貼り付けます.

WordPressでAdobe FontsによるTypekitを追加する

以上で、WordPressテーマのスタイルシートで選択したTypekitフォントを次のように使用できるようになりました。

h1 .site-title {
font-family:gilbert、sans-serif;
}

詳細な手順については、Typekitを使用してWordPressに素晴らしいタイポグラフィを追加する方法のチュートリアルを確認してください.

CSS3 @ font-faceを使用してWordPressにカスタムフォントを追加する

WordPressでカスタムフォントを追加する最も直接的な方法は、CSS3 @ font-faceメソッドを使用してフォントを追加することです。この方法では、Webサイトで好きなフォントを使用できます.

あなたがしなければならない最初のことはあなたが好きなフォントをウェブフォーマットでダウンロードすることです。フォントのWeb形式がない場合は、FontSquirrel Webfontジェネレーターを使用して変換できます。.

webfontファイルを入手したら、WordPressホスティングサーバーにアップロードする必要があります。.

フォントをアップロードするのに最適な場所は、テーマまたは子テーマのディレクトリの新しい「フォント」フォルダ内です.

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:通常;
}

font-familyとURLを独自のものに置き換えることを忘れないでください.

その後、次のように、テーマのスタイルシートの任意の場所でそのフォントを使用できます。

.h1サイトタイトル{
フォントファミリー: "アルボ", Arial、サンセリフ。
}

CSS3 @ font-faceを使用してフォントを直接ロードすることが常に最良の解決策とは限りません。 Google FontsまたはTypekitのフォントを使用している場合、最適なパフォーマンスを得るために、サーバーから直接フォントを提供するのが最善です。.

以上で、この記事がWordPressにカスタムフォントを追加するのに役立ったことを願っています。 WordPressでアイコンフォントを使用する方法とWordPressでフォントサイズを変更する方法に関するガイドもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map