WordPressユーザー定義のフォントを使用する(したい、ハングルフォントアップロード)

Last Updated:2022年08月24日| | 14のコメント

WordPress テーマやページビルダーが提供する機能を使用してカスタムフォントをアップロードしたり、 Use Any Fontなどのプラグインを使用してカスタムフォントを適用可能

しばらく前にしたクライアントが WordPress サイトに顧客が希望するフォントをインストールして適用したクロムはよく表示されますIEで正常に出てこないながら問題の解決を要請しきました。

特殊なフォントをインストールしてロードするとサイトの速度もどうしても影響を受ける可能性があるので、あえてそうする必要があるかと思ったが、顧客が特定のフォントを指定して「タイトルにそのフォントを使用してください」としたので、無条件にそのフォントのみ使用が可能だとね。

インターネットからダウンロードしたウェブフォントを持ってインターネットに記載されているソリューションを検索して適用してみても問題が適切に解決されていない。 なぜクロムはされているためにIEはないでしょうか? おそらくインターネットエクスプローラがwoff2フォーマットをサポートしていないために発生する問題のようです。

IEがwoff2フォーマットがサポートしていないために発生する問題なので、IEがサポートするwoff形式のフォントを使用すると解決されます。 (woffはIE9からサポートします。)となっており、開発者コミュニティでもインターネットエクスプローラに対応しない傾向です。

[この記事は2022年8月24日に最終更新されました。 ]

WordPress テーマ/ページビルダーが提供するカスタムフォントオプション

一部の有料テーマやページビルダーは、有料または無料のハングルフォントをアップロードして適用するオプションを提供しています。

たとえば、ベストセラーのテーマである Avada「カスタムフォント」セクションにカスタムフォントをアップロードできます(「Avada テーマカスタムフォントを適用する方法"参照)。

エレメンタープロ(Elementor プロ)でもカスタムフォントを登録して使用できる機能を提供します。

WordPress テーマ/ページビルダーが提供するカスタムフォントオプション

テーマまたはページビルダーにカスタムフォントをアップロードする機能が提供されている場合は、別のプラグインをインストールする必要なく、テーマまたはページビルダーが提供する機能を利用できます。

ユーザー定義のフォントプラグインUse Any Font

そうするうちに Use Any Fontというプラグインを使用してフォントをロードして設定してくれるので、問題が解決されました。

WordPressユーザー定義のフォントを使用する

希望のフォントを埋め込みして使用することができ、特別なCSSは必要ありません。 フォントがttf、otf、woff形式のいずれかされているプラ​​グインをインストールして使用が可能です。

プラグインのサイトで説明している特徴をざっとまとめてみると、:

  • 迅速かつ簡単に設定します。 CSSの知識不要
  • すべての主要なブラウザのサポート:IE 6以上、Firefox、クロム、サファリ、iOS、アンドロイド、オペラなど
  • プラグインインターフェースフォントアップローダでフォント変換
  • アップロードされたフォントをEditorですぐに使用
  • ttf、otf、woffなどのフォント形式をサポート。 必要なフォントが自動的に変換され
  • 最大15MBフォントファイルを使用可能
  • @ font-face CSSを使用してフォント埋め込みます。 SEOフレンドリー、高速読み込み
  • 複数のフォントを使用可能
  • ユーザーのサーバーにフォントが保存されるため、ロード時間が速い

APIキーを取得しなければ、プラグインメーカーのサーバーに接続してフォント変換が可能です。 フォントがブラウザに応じて適切に適用されない場合は、このプラグインを使用すると、意外に問題が解決することができます。

無料版を使用すると、単一のフォントを変換することができます。 2つ以上のフォントを適用するには、有料版を利用してください。 このプラグインを使用して WordPressユーザーフォントをアップロードして適用する方法を次の記事で参照してください。

参考までに、より洗練された機能にフォントを管理したい場合 FontPressという WordPress フォント管理プラグインを使用してみることができます。

メモ:


14のコメント

コメント

  1. こんにちは。
    上記の fontpress を使用すると
    スピードを落とさずに共有ゴシックフォントをアップロードして使用できますか?

    応答
    • フォントをインストールすると速度に影響を与えるようです。

      フォントをwoff2形式に変換してアップロードし、enquque方式でフォントをロードすると速度の影響を最小限に抑えることができるようです。

      例えば、 チャイルドテーマをインストールしてフォントをアップロードしたら、チャイルドテーマ内の関数ファイルに次のコードを追加します。

      function custom_fonts() {
      wp_enqueue_style('custom-font', get_stylesheet_directory_uri() . '/fonts/your-font-name.woff2', array(), null);
      }
      add_action('wp_enqueue_scripts', 'custom_fonts');

      スタイルシートファイル(style.css)に次のコードを追加してみてください。

      @font-face {
      font-family: 'YourFontName';
      src: url('fonts/your-font-name.woff2') format('woff2'),
      url('fonts/your-font-name.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      }
      /* Applying the font to elements */
      body, h1, h2, h3, p {
      font-family: 'YourFontName', sans-serif;
      }

      うまくいくかどうかテストしてみてください。

      上記のコードは単なる例なので、適切に適用してください。

      応答
      • 答えてくれてありがとう!
        もしこのサイトも上記の方法でフォントを変更されたのでしょうか?

      • このブログにはカスタムフォントは使用されておらず、テーマ設定値をそのまま使用しています。 プラグインを使用してGoogleフォントを無効にしました。

      • 質問が頻繁に申し訳ありません。
        私の場合 generatepress の基本システムフォントを使用すると、ハングルがとても奇妙に見えますが、今このサイトの場合、ハングルがウェブ上で見事に出ていて、 generatepressでこのサイトのように設定する方法はありますか?

      • こんにちは、WooKangさん。 質問はいつでも歓迎です。

        この部分については、私が見て、別の文でまとめて上げることができれば上げてみましょう。 チュソクの休暇のため、少し遅れることがあります。

    • エゴ..ありがとうございます。 良い情報でたくさん助けています。 ありがとうございます!

      応答
    • エゴ..ありがとうございます。 良い情報でたくさん助けています。
      誠にありがとうございます。

      応答
  2. こんにちは。 Astraテーマとエレメントフリー版を cafe24 ホスティングセンターで利用中ですが、 cafe24にFTPでWebフォントファイル.woffをアップロードし、アストラショートコード、カスタムcssから読み込むため、複数のコードを試しても読み込まれません。 また hide my WP を活性化するので、それでも接続されていた FTP も接続できませんね。 ホスティングを転送する必要がありますか? 移動したら、現在作業中のファイルはFTPにクロールしてFTPにアップロードすればよいでしょうか? 頭が痛い..助けてください

    応答
  3. こんにちは。 常に詳細なコンテンツも見ていただきありがとうございます。
    相違ではなく、use any font関連です。
    私有料で購入し、メニューなどのフォントを適用しようとしたら、適用がだめお問い合わせメールを送り、返信が来たんです。 下custom element boxにコードを挿入するように見える、custom element boxが何でしょうか? (ここでのコードを配置する必要がする分からなく解決できずにいます)
    --------------------
    Please keep this in custom element box and assign font to it from Font assign tab。
    ul.sf-menu li a
    これで問題が解決するはずです。

    応答