シードプロ
シードプロ

SeedProd ドキュメンテーション

SeedProdのドキュメント、参考資料、チュートリアル

SeedProdでカスタムフォントを使用する方法

SeedProdはCSS3を使用したカスタムフォントに対応しています @font-face この方法を使えば、サーバー上にホストされている任意のフォントファイルを読み込み、ページやテンプレート内のテキスト要素に適用することができます。

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

ご希望のフォントをダウンロードし、Web対応形式に変換してください。すべてのブラウザやデバイスでフォントが正しく表示されるように、FontSquirrel Webfont Generator を使用して以下のファイル形式を生成してください：

  • WOFF：Web Open Font Format。Webページに適しています。
  • 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例を参照してください。

SeedProdエディタの「グローバル設定」にある「カスタムCSS」セクション
@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」セクションに2つ目のCSSルールを追加して、ページ上の任意の要素に適用します。以下の例では、すべての見出しタグにフォントを適用しています。必要な要素を対象にするよう、セレクタを調整してください。

h1, h2, h3 {
  font-family: 'YourFontName', sans-serif;
}
グローバルCSSを使用して、SeedProdの見出しにカスタムフォントを適用する

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

関連記事

SeedProd ドキュメンテーション


  

    60,000を超える他の情報とともに、無料のヒントやリソースをあなたの受信トレイにお届けします。
  

  

    

      

        

          
        

        

          
        

        

          
        

      

    

  

  

    フォローする