シードプロ
シードプロ

SeedProd ドキュメンテーション

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

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

SeedProdでカスタムフォントを使用するには、CSS3 @font-face メソッドを使用します。この方法では、お好みのフォントをウェブサイトに組み込むことができます。

まず始めに、ご希望のフォントをウェブ互換フォーマットでダウンロードする必要があります。また、複数のブラウザやデバイスで表示できるように、カスタム フォントを以下の形式に変換することが理想的です。FontSquirrel Webfont ジェネレータを使用して、以下のフォントファイルを生成できます。

  • WOFF：ウェブページに適したウェブオープンフォントフォーマット。
  • WOFF2：圧縮を強化したWOFFの改良版。
  • TTF：TrueTypeフォント。Mac OSとWindowsで共通。
  • SVG: Scalable Vector Graphics フォント.
  • EOT：ウェブページ用の埋め込みOpenTypeフォント。
  • OTF: さまざまなプラットフォームで広く使われているOpenTypeフォーマット。

フォントファイルを入手したら、次のステップはWordPressホスティングサーバーにアップロードすることです。これは、FTP、cPanelのファイルマネージャ、またはファイルマネージャプラグインを使用して行うことができます。あなたの /wp-content/ディレクトリ内の任意のフォルダを選択して、カスタムフォントをアップロードします。

SeedProdのグローバルCSS設定でカスタムフォントを追加する

フォントのアップロードに成功したら、CSS3の @font-face カスタムフォントファイルへの直接リンクを使ったテクニック。

カスタムフォントを参照する次のCSSコードを グローバル設定 > カスタムCSS セクションを更新してください。を更新してください。 font-family とURLをフォントの詳細とともにお送りください。 

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

続いて、サイト全体にフォントを適用することができます： 

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

例

関連記事

SeedProd ドキュメンテーション


  

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

  

    

      

        

          
        

        

          
        

        

          
        

      

    

  

  

    フォローする