SeedProd は、CSS3 の @font-face メソッドを使用してカスタムフォントをサポートしています。これにより、サーバーでホストされている任意のフォントファイルを読み込み、ページやテンプレートのテキスト要素に適用できます。

---

ステップ 1: フォントファイルの準備

目的のフォントをダウンロードし、ウェブ互換フォーマットに変換します。すべてのブラウザやデバイスでフォントが正しく表示されるように、FontSquirrel Webfont Generator を使用して次のファイルタイプを生成してください。

• WOFF: Web Open Font Format。ウェブページに適しています。
• WOFF2: WOFF の改良版で、圧縮率が向上しています。
• TTF: TrueType フォント。Mac および Windows で広くサポートされています。
• SVG: Scalable Vector Graphics フォントフォーマット。
• EOT: Embedded OpenType。ウェブページ互換性に使用されます。
• OTF: OpenType フォーマット。ほとんどのプラットフォームでサポートされています。

---

ステップ 2: フォントファイルを WordPress にアップロード

フォントファイルを WordPress ホスティングサーバーにアップロードします。FTP、ホスティングコントロールパネルのファイルマネージャー、またはファイルマネージャープラグインを使用してこれを行うことができます。アップロード先として、/wp-content/ ディレクトリ内の任意のフォルダを選択してください。例: /wp-content/fonts/。

アップロードした各フォントファイルへの完全な URL パスをメモしておきます。次のステップでこれらの URL が必要になります。

---

ステップ 3: SeedProd のグローバル CSS でフォントを登録

SeedProd エディターを開き、グローバル設定 > カスタム CSS に移動します。アップロードしたフォントファイルを指す @font-face ルールを追加します。YourFontName と例の URL を、実際のフォント名とファイルパスに置き換えてください。

@font-face {
  font-family: 'YourFontName';
  src: url('https://example.com/wp-content/fonts/YourFont.woff2') format('woff2'),
       url('https://example.com/wp-content/fonts/YourFont.woff') format('woff'),
       url('https://example.com/wp-content/fonts/YourFont.ttf') format('truetype'),
       url('https://example.com/wp-content/fonts/YourFont.otf') format('opentype'),
       url('https://example.com/wp-content/fonts/YourFont.svg') format('svg'),
       url('https://example.com/wp-content/fonts/YourFont.eot') format('embedded-opentype');
}

---

ステップ 4: 要素にフォントを適用

フォントが登録されたら、同じ カスタム CSS セクションに別の CSS ルールを追加して、ページ上の任意の要素に適用します。以下の例では、すべての見出しタグにフォントを適用しています。必要に応じてセレクターを調整して、対象の要素を指定してください。

h1, h2, h3 {
  font-family: 'YourFontName', sans-serif;
}

---

カスタムフォントが SeedProd ページ全体で利用できるようになりました。追加の CSS セレクターを使用して、段落、ボタン、ナビゲーションリンク、またはその他の要素にフォントを適用し、サイト全体でタイポグラフィを統一できます。