Avada テーマカスタムフォントを適用する方法

Last Updated: 2021 年 03 月 20 日 4のコメント

WordPressでカスタムフォントを適用したい場合Use Any Fontのようなプラグインを使用すると便利です。 人気 WordPress テーマである Avadaでは、ユーザーフォントをアップロードして適用することができます。 Avada テーマにカスタムフォントを適用する方法について説明します。

Avada テーマカスタムフォントを適用する方法(例:分割スクエアラウンド)

Avada テーマを使用している場合は、ユーザーフォントをアップロードして設定するオプションを提供しています。 例として分かち合いスクエアラウンドフォントをアップロードして設定してみましょう。

ユーザーフォントをアップロードする

WordPress 管理者ページ内で Avada > Options>タイポグラフィ> Custom Fontsをクリックします。

Avada テーマカスタムフォントアップロード

書体名(Font Name)を入力し、各タイプのフォントファイルをアップロードします。

Avada テーマカスタムフォントアップロード

次の形式のフォントファイルをアップロードすることができます。

  • WOFF2
  • ウォフ
  • TTF
  • EOT
  • SVG

テストで分かち合いスクエアラウンドフォントをアップロードしてみました。 NanumSquareRoundフォントは https://github.com/innks/NanumSquareRoundからダウンロードすることができます。 SVG形式のフォントファイルはありませんが、オンライン TTF to SVG ConverterサイトでTTFフォーマットをSVG形式に変換することができます。

フォントファイルをすべてアップロードした場合Addボタンをクリックします。 いくつかの種類をフォントをアップロードするには、同じ操作を繰り返します。

Avada テーマカスタムフォントを適用する方法

変更を保存します。

フォントファイルをアップロードするとき申し訳ありません。 このファイルタイプは、セキュリティ上の理由できません。'エラーが発生すると、メディアライブラリからファイルのアップロードが失敗する可能性があります。 そのような場合 WP-config.phpを ファイルに次の行を追加した後、再試行すると、問題なくフォントファイルをアップロードすることができます。

define( 'ALLOW_UNFILTERED_UPLOADS', true );

WP-config.phpを ファイルは、 WordPressがインストールされてルートフォルダの下にあります。 wp-config.phpファイルを修正するためには、FTPの接続が可能必要があります。 Bluehost などcPanelを提供する環境では、File Managerを使用して変更することも可能です。

フォントファイルのアップロード後は、上記の行を削除してもされます。

メモ:

ユーザーフォントを適用する

ユーザーフォントをアップロードした場合好きなところフォントを適用することができます。 WordPress 伝言板で Avada > Options>タイポグラフィ> Body Typography 또는 Heading Typographyをクリックします。

Avada テーマカスタムフォントを適用する方法(分割スクエアラウンドフォント)

H1、H2、H3...などのヘディングタイポグラフィを適用したい場合は、Heading Typographyセクションで詳細に設定できます。

Font Family下のフィールドをクリックすると、ドロップダウンが表示され、書体を選択することができます。 ユーザーがアップロードしたフォントは、 カスタムフォント 下に表示されます。 例では、H1ヘディングに対してNanumSquareRoundBを選択しました。 保存した後にサイトを確認してみると、フォントが適用されたことを確認することができるでしょう。

Avada テーマに分けスウェオラウンドフォント適用例

もしフォントが必要に応じて適用されない場合には、CSSを使用して強制的に適用することができます。 例えば、上記の方法でH2を設定しても、一部のH2項目には、カスタムフォントが適用されないことが判明しました。 この場合は、次のような形式でカスタムCSSを追加すると、必要に応じて適用される場合があります。

Avadaの場合 Avada > Options>カスタムCSS ページのカスタムCSSコードを追加することができます。

例:

h2.entry-title {
    font-family: NanumSquareRoundB, Georgia, serif !important;
}

参照


4のコメント

コメント

  1. こんにちは、いつも文章よく読んでいます。

    Avada テーマ関連して、ご質問掛けます。
    サイトのトラフィックが一度ロードするのに、3mb〜6mb次いうので確認してみると、
    Avada テーマでfusionビルドのfontを呼ぶようでビルド
    フォントの設定をリセットしておき、私別に追加おいたウェブフォントに加えて、
    登録していない。 その設定をしても、

    テーマビルドで提供するのと同じウェブフォント(タイプ2個)に厚さが、他のフォントが10個以上ずつ読み込んでかね。(noto sans KRなど)

    だから、どこで歌っと過ぎ確認してみるwp-content / upload / fusion-styleからフォントとテーマビルダーに追加しておいたcustom cssがあって、メインにロードするファイルを重複しているフォントを削除して取り組まなければ減りました。

    ところで.. 別のページに入ると、別のページに入ったcssファイルが同じ内容で新しいスタイルファイルが…作られるのに。

    Avada 側に他の方がお問い合わせを差し上げましたが、答えがありませんでしたㅜㅜ...

    他の方法を知っているでしたら回答お願いします。

    応答