WordPressカスタムフォント追加ガイド（ブロックテーマ＆クラシックテーマ全般）

フォントタイポグラフィはウェブデザインにおいて非常に重要です。統一された特徴的なタイポグラフィは、読みやすさを向上させるだけでなく、ブランドのアイデンティティを強化するのにも役立ちます。カスタマイズされたフォントは、デフォルトのシステムフォントよりも視覚的に魅力的であるため、プロフェッショナルな外観を作成するのに最適な方法です。

この記事では、WordPressのフォントをインポートする3つの一般的な方法を、異なるテーマの種類や操作習慣に適した方法で紹介します。

フォントファイルの準備

一般的に使用されるウェブフォント形式には、次のようなものがあります。 .woffそして.woff2そして.otfそして.ttf 歌で応える イート.その中で .woff2 高圧縮で、ほとんどのモダンブラウザに対応。

フォント形式が使用条件を満たしていない場合は、Transfonter.orgなどのオンラインツールで変換できます。また .woff 歌で応える .woff2 互換性を高めるために、2つのフォーマットを用意した。

方法1：サイトエディターを使ってフォントをアップロードする（WordPress 6.5以上の場合）

WordPress 6.5でフォントのアップロード機能が追加されましたが、ブロックテーマを有効にする必要があります。

操作経路は以下の通り：

• アピアランス＞エディター」と進む。

• 右上の「スタイル」設定を開き、「タイポグラフィ」をクリックする。

• フォントの管理」を選択し、「フォントのアップロード」をクリックします。

• ローカルフォントファイルの選択（対応） .woffそして.ttf など

• アップロード後、サイトレイアウト設定で対応するフォントを選択できます。

この方法ではプラグインまたはコードの介入。Google Fontsを使用するには、"フォントのインストール"でGoogle Fontsフォントを検索し、ワンクリックで追加します。

方法2：プラグインを使ってフォントをインポートする（すべてのテーマに適用可能）

サイトがブロックテーマを使っていない場合、あるいはもっと直感的に使いたい場合はプラグインフォントのインポートを有効にする。

推奨プラグイン

• 任意のフォントを使用するローカルフォントのアップロードをサポート
• 簡単グーグルフォントGoogle Fontsに素早くアクセスするのに適しています。

使う 任意のフォントを使用する プラグインの手順は以下の通り：

• プラグインのインストールと有効化

• プラグインの設定ページでAPIキーを申請し、確認する。

• フォントファイルをアップロードし、名前を付ける

• フォントのアップロードに成功すると、サイトレイアウトメニューに表示されます。

プラグイン方式は、ほとんどのサイトに適しており、コードベースの有無にかかわらず、簡単にセットアップできる。

方法3：子テーマを使って手動でフォントをインポートする（コードの経験があるユーザー向け）

より高い自由度が必要な場合や、プラグインに依存しないアプローチが必要な場合は、子テーマを使ってフォントのインポートを実現できます。

手順は以下の通り：

• ある /wp-content/themes/ の下にサブフォルダを作成します。

• 増加 スタイル.css 歌で応える functions.php テーマ情報を定義し、親テーマのスタイルを紹介するファイル。

• 確立 フォント フォルダにフォントファイルをアップロードする。

• ある スタイル.css ローカルにアップロードしたカスタム・フォントを読み込むために、以下のCSSを追加します。:

フォントフェイス
  font-family: 'CustomFont'.
  src: url('fonts/CustomFont.woff2') format('woff2')、
       
  font-weight: normal；
  font-style: normal; }.
}
ボディ
  font-family: 'CustomFont', sans-serif; } body {.
}
フォントフェイス
  font-family: 'CustomFont'.
  src: url('fonts/CustomFont.woff2') format('woff2')、
       
  font-weight: normal；
  font-style: normal; }.
}
ボディ
  font-family: 'CustomFont', sans-serif; } body {.
}
フォントフェイス
  font-family: 'CustomFont'.
  src: url('fonts/CustomFont.woff2') format('woff2')、
       
  font-weight: normal；
  font-style: normal; }.
}
ボディ
  font-family: 'CustomFont', sans-serif; } body {.
}

• WordPressのバックエンドに戻り、子テーマを有効にする。

この方法は、ある程度の技術的知識を持つユーザーに適しており、より柔軟なコントロールとカスタマイズが可能です。

概要

カスタムフォントは、ウェブサイトのタイポグラフィを統一したスタイルにするのに役立ちます。サイトエディタやプラグインを使うにせよ、手作業で行うにせよ、フォントを置き換える作業は達成可能です。サイトのテーマや自身のニーズを考慮しながら適切な方法を選択することで、全体的な視覚効果や情報表現を向上させることができます。