プログラミング

WordPress カスタムフォント追加方法

最終更新： 22/04/2025
1 分の読み

WordPressサイトにカスタムフォントを追加する方法は、ウェブデザインの個性を出すために非常に重要です。特に、サイトのデザインに独自性を持たせるために、Webフォントを使用することが一般的です。この記事では、CSS3の@font-faceを使用して、WordPressにカスタムフォントを追加する方法について、詳細に説明します。

1. @font-face の基本概念

@font-faceは、CSS3におけるルールの一つで、ウェブページにカスタムフォントを指定するために使用されます。この規則を使うことで、Webフォントをサーバーから直接読み込み、サイト上で使用することができます。これにより、ユーザーの端末に特定のフォントがインストールされていない場合でも、デザイン通りのフォントを表示できます。

関連記事

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

WordPressにカスタムフォントを追加するには、いくつかのステップがあります。ここでは、その手順を順を追って説明します。

2.1. フォントファイルの準備

最初に、使用したいフォントのファイルを準備します。フォントファイルは通常、以下の形式で提供されます。

  • .ttf（TrueTypeフォント）

  • .otf（OpenTypeフォント）

  • .woff（Web Open Font Format）

  • .woff2（圧縮されたWebフォント形式）

フォントファイルを入手したら、WordPressのテーマフォルダ内の適切な場所にアップロードします。通常は、wp-content/themes/your-theme/fonts フォルダを作成して、その中にファイルを置くのが一般的です。

2.2. @font-face をCSSに追加

次に、カスタムフォントをCSSに追加します。WordPressのテーマには、CSSファイルがいくつかありますが、style.cssというファイルが一般的です。テーマのstyle.cssに以下のように@font-faceルールを追加します。

css
@font-face {
    font-family: 'MyCustomFont';  /* フォントの名前 */
    src: url('fonts/mycustomfont.woff2') format('woff2'),  /* woff2形式 */
         url('fonts/mycustomfont.woff') format('woff'),    /* woff形式 */
         url('fonts/mycustomfont.ttf') format('truetype'); /* ttf形式 */
    font-weight: normal;  /* フォントの太さ */
    font-style: normal;   /* フォントのスタイル */
}

このコードでは、font-familyでフォント名を指定し、srcでフォントファイルのパスを指定しています。複数のフォント形式を指定することで、ブラウザがサポートする形式を自動的に選択して使用します。

2.3. フォントを適用する

@font-faceでカスタムフォントを定義した後は、WordPressのサイト内でそのフォントを使うために、指定したfont-familyを適用する必要があります。例えば、すべての見出しにカスタムフォントを適用するには、以下のようにCSSを記述します。

css
h1, h2, h3, h4, h5, h6 {
    font-family: 'MyCustomFont', sans-serif;
}

このコードにより、サイトのすべての見出し（h1からh6）にカスタムフォントが適用されます。もちろん、適用するHTML要素を自由に変更することができます。

2.4. WordPressでのスタイルシートの編集

カスタムCSSをWordPressに追加するには、いくつかの方法があります。

  1. テーマのstyle.cssを直接編集する方法

    • WordPressの管理画面にログインし、「外観」→「テーマエディター」に進みます。

    • style.cssを選択し、上記の@font-faceのコードを追加します。

  2. カスタムCSSを追加する方法

    • 「外観」→「カスタマイズ」→「追加CSS」に進み、そこにカスタムCSSを追加します。これにより、テーマファイルを直接編集することなくカスタムフォントを適用できます。

3. フォントの互換性

Webフォントを使用する際に最も重要な点の一つは、ブラウザの互換性です。@font-faceで使用するフォントファイルは、できるだけ複数の形式を提供することが推奨されます。例えば、woff2やwoffは現代的なブラウザに対応していますが、古いブラウザではttfやeotが必要な場合があります。以下のように、複数のフォント形式を提供することで、すべてのユーザーに最適なフォントを提供できます。

css
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2'),
         url('fonts/mycustomfont.woff') format('woff'),
         url('fonts/mycustomfont.ttf') format('truetype');
}

4. Google Fontsや他のWebフォントサービスの活用

もし、自分でフォントを用意するのが面倒な場合や、特定のデザインに必要なフォントがない場合は、Google Fontsなどの無料のWebフォントサービスを利用するのも一つの手です。Google FontsをWordPressに追加する方法は簡単で、以下の手順で実行できます。

4.1. Google Fontsからフォントを選ぶ

Google Fontsのウェブサイト（https://fonts.google.com/）にアクセスし、使用したいフォントを選びます。選択後、「Embed」タブをクリックして、提供されたコードをコピーします。

4.2. フォントをWordPressに追加

次に、functions.phpファイルに以下のコードを追加します。

php
function my_custom_fonts() {
    wp_enqueue_style( 'my-custom-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', false ); 
}
add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

このコードでは、Google FontsからRobotoフォントを読み込んでいます。wp_enqueue_style関数を使ってスタイルシートを適切に読み込むことで、Google FontsをWordPressに追加できます。

5. 結論

WordPressにカスタムフォントを追加することは、サイトのデザインをカスタマイズし、訪問者にユニークな体験を提供するための強力な方法です。@font-faceを使用することで、カスタムフォントを自分のサーバーから直接読み込むことができ、Google Fontsなどの外部サービスを使うことで、さらに便利にフォントを管理することができます。自分のサイトに合ったフォントを選び、デザインに一貫性を持たせることで、プロフェッショナルな印象を与えることができるでしょう。

この方法を使って、より魅力的で視覚的に魅力的なWordPressサイトを作成しましょう。

最終更新： 22/04/2025
1 分の読み
Back to top button