はじめに
この記事では、WordPressサイトの見た目を一新するためには欠かせない「フォントカスタマイゼーション」について解説します。適切なフォント選択と設定は、ウェブサイトのユーザビリティやブランドイメージを大きく左右します。
症状・背景
このテーマが必要になる主な場面:
- サイトのデザインに合わせて独自の書体を使用したい場合
- ブランドイメージを強調するために特定のフォントを使いたい場合
- 既存のテーマやプラグインでは対応していない特殊なフォントを取り入れたい場合
手順・設定方法
ステップ1: 管理画面から外観をカスタマイズする
# WordPressダッシュボードにログインします。
http://あなたのドメイン/wp-admin/
# サイトの外観をカスタマイズするため、「外観」メニューをクリックし、表示された「カスタマイズ」を選択します。ステップ2: フォント設定ページを開く
# 「カスタマイズ」画面で「総合設定」→「サイトのタイトルとタグライン」→「書体」をクリックしてフォント設定ページを開きます。
# ここで、ウェブフォント（Google Web Fontsなど）を使用するかどうかを選択します。ステップ3: CSSファイルにカスタムCSSコードを追加
# WordPressのテーマディレクトリにある「style.css」ファイルを編集します。FTPクライアントやファイルエディタ（Cpanel等）を使用して、サーバー上から直接アクセスするか、ローカルにダウンロード後、編集して再アップロードします。
# カスタムCSSコードを追加します。例えば、ヘッダーのフォントサイズを変更するには以下の通りです：
body .header {
font-size: 20px;
}ステップ4: フォントファミリーをカスタマイズ
# Google Fontsから使用したい書体を選択し、提供されるHTMLタグやCSSコードを利用してWordPressサイトにインポートします。
# 「functions.php」ファイル（テーマのルートディレクトリ）を開き、「wp_enqueue_style」という関数を使ってフォントを読み込みます：
function my_theme_fonts() {
wp_enqueue_style( 'custom-fonts', 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Oswald:300,600&display=swap' );
}
add_action('wp_enqueue_scripts', 'my_theme_fonts');注意事項
- すべてのカスタムCSSコードは、ブラウザの開発者ツールを使用して確認しながら追加すると良いでしょう。
- フォントを変更する際には、読み込みが遅延しないよう適切なCDN（コンテンツデリバリーネットワーク）を利用してインポートすることが推奨されます。
- セキュリティ上の注意: 外部からCSSファイルを読み込む際は、そのソースが信頼できるものであることを確認してください。不正に書かれたコードによってサイトがハックされる可能性があります。
- パフォーマンス/運用上の注意: あまり多くのカスタムスタイルを使用するとパフォーマンスの低下につながる可能性があるため、必要最小限のCSSを適用することが推奨されます。
まとめ
1. 基本設定: WordPress管理画面から簡単にウェブフォントを利用できます。
2. 高度なカスタマイズ: CSSファイルに直接コードを追加することで、より詳細な調整が可能です。
3. セキュリティ確保: 外部からのスタイルシートインポート時には信頼できるソースを使用しましょう。
4. パフォーマンス最適化: 必要最小限のカスタムCSSを適用することでサイトのロード時間を短縮できます。
5. モバイル対応: レスポンシブデザインに対応した書体を選択すると、スマートフォンやタブレットでの表示が改善されます。
関連記事: