WordPressでカスタムフォントを追加する方法：Google Fonts、Typekit、CSSの@font-faceの使い方を解説

WordPressにカスタムフォントを追加したいですか？カスタムフォントを使用すると、ウェブサイト上でさまざまなフォントを美しく組み合わせて使用し、タイポグラフィとユーザー体験を向上させることができます。カスタムフォントは見た目の美しさだけでなく、読みやすさの向上、ブランドアイデンティティの確立、WordPressサイトでのユーザーの滞在時間の増加にも役立ちます。

この記事では グーグルフォントそしてタイプキット 歌で応える フォントフェイス メソッドを使ってWordPressにカスタムフォントを追加することができます。

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

注目してください：多くのフォントを読み込むと、ウェブサイトが遅くなることがあります。.2つのフォントを選び、サイトに使用することをお勧めします。また、サイトを遅くすることなくフォントを正しく読み込む方法もご紹介します。

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

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

最近では、Google Fonts、Typekit、FontSquirrel、fonts.comなど、素晴らしい無料のウェブフォントを見つけられる場所がたくさんある。

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

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

方法1：WordPressプラグインでGoogleフォントを追加する

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

プラグインのインストール::
- インストールとアクティベーショングーグルフォントタイポグラフィプラグイン。
プラグインの設定::
- 有効化したら、メールアドレスを入力して公式クイックスタートガイドを受け取ってください。次に、管理画面のサイドバーにある「Font Plugins → Custom Fonts」をクリックします。自動的にWordPressテーマカスタマイザーに移動し、新しい"フォント・プラグイン「パート

フォント選択::
- 基本設定]セクションで、サイトのデフォルトフォントを選択し、[詳細設定]で、サイトの特定の部分のフォントを選択します。
- フォントファミリー」ドロップダウンメニューを使用して、新しいフォントを選択します。プレビューは自動的にフォント効果を表示するように変更されます。

ポスティングの変更::
- カスタムフォントの選択に満足したら、" をクリックします。ポスト"ボタンをクリックして変更を保存します。

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

この方法では、WordPressのテーマファイルにコードを追加する必要がある。

フォント選択::
- Google Fontsライブラリにアクセスし、使用したいフォントを選択します。フォントの下にある「クイック使用」ボタンをクリックし、使用したいスタイルを選択して埋め込みコードをコピーします。

コードを追加::
- のテーマを編集する。 header.php ファイルにコードを貼り付けます。 <body> ラベリングやWPCodeプラグインを使用する前に、埋め込みコードを "Header "ボックスに貼り付け、"Save Changes "をクリックしてください。

フォントの使用::
- 例えば、テーマのスタイルシートでこのフォントを使用する：

.site-title { font-family: 'Open Sans', Arial, sans-serif; }.

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

Adobe FontsのTypekitもまた、デザインプロジェクトで使える素晴らしいフォントを提供する無料の高品質リソースだ。

アカウント登録::
- Adobe Fontsアカウントに登録し、Browse Fontsセクションにアクセスします。フォントを選択し、プロジェクトを作成し、プロジェクトIDと埋め込みコードをコピーします。

コードを追加::
- のテーマを編集する。 header.php ファイルにコードを貼り付けます。 <body> ラベリングやWPCodeプラグインを使用する前に、埋め込みコードを "Header "ボックスに貼り付け、"Save Changes "をクリックしてください。
フォントの使用::
- 選択したTypekitフォントをテーマのスタイルシートで使用する：

.site-title { font-family: 'gilbert', sans-serif; }.

CSSの@font-faceを使ってWordPressにカスタムフォントを追加する

WordPressにカスタムフォントを追加する最も簡単な方法は、CSSを使って@font-faceフォントを追加することです。

フォントのダウンロード::
- お気に入りのフォントをウェブ形式でダウンロードできます。適切なウェブフォーマットが利用できない場合は、FontSquirrel ウェブフォントジェネレータを使用して変換できます。
フォントのアップロード::
- フォントをWordPressホスティングサーバーにアップロードします。推奨される場所は、テーマまたは子テーマディレクトリ内の新しい「fonts」フォルダです。
フォントの読み込み::
- テーマのスタイルシートにフォントを読み込むには、CSSの@font-faceルールを使います：

<フォントフェイス { font-family: 'Arvo'; src: url('http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf'); font-weight: normal; }.

フォントの使用::
- このフォントは、例えばテーマ・スタイルシート内の任意の場所で使用してください：

.site-title { font-family: 'Arvo', Arial, sans-serif; }.

CSSの@font-faceを使ってフォントを直接読み込むことは、必ずしも最善の解決策とは限りません。例えば グーグルフォント もしかしたら タイプキット フォントを使用する場合は、そのフォントのサーバーから直接フォントを提供するのが最良のパフォーマンスです。

はんけつをくだす

カスタムフォントを追加すると、WordPressサイトの視覚的な外観とユーザーエクスペリエンスが劇的に向上します。フォントは、Google Fonts、Typekit、CSS@font-faceを使用することで簡単にカスタマイズできます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み