WordPress エレメンタプロカスタムフォントを使う

Last Updated: 2023 年 02 月 17 日 댓글

WordPressでカスタムフォントを使用するさまざまな方法があります。 Googleフォントの場合は、Googleフォントプラグインをインストールできます。 より早くフォントを読み込む場合は、フォントをローカルに読み込むことを検討してください。 エレメンタープロ(Elementor プロ)では、カスタムフォントを登録して使用できます。

WordPress エレメンタプロカスタムフォントを使う

この記事では、Noto Sans JPフォントをエレメンタプロのCustom Fonts(カスタムフォント)に登録する方法について説明します。

WordPress お知らせ»エレメント»カスタムフォントに移動し、 新規追加 ボタンをクリックします。

エレメントカスタムフォントを登録する

Add New Font(新しいフォントを追加) 画面が表示されたら、フォント名を指定して ADD FONT VARIATIONをクリックします。

WordPress エレメンタプロカスタムフォントを使う

これを行う前に、まずフォントをダウンロードして変換する必要があります。 Noto Sans JPフォントは Googleサイトからダウンロードが可能です。

フォントファイルをダウンロードしたら、フォントを次の形式に変換します。

  • WOFFフォーマット
  • WOFF2フォーマット
  • TTFフォーマット
  • SVGフォーマット
  • EOTフォーマット

SVGフォーマットは、Legacy iOSで使用されているとエレメンタが案内しています。 EOTフォーマットはIE6~IE9ブラウザで使用されるそうですね。 SVGフォーマットとEOTフォーマットは不要です。 Naver カフェにNoto Sans JPフォントをWOFF、WOFF2、TTF、EOT形式に変換してアップロードしました。 ダウンロードして活用できます。

フォント変換は、オンラインで無料のフォントコンバータを利用して行うことができます。

フォントが準備されたら、フォントの太さでアップロードします。

WordPress エレメンタプロカスタムフォントを登録する

重量 でフォントの太さ(Normal、Bold、100〜900)を選択し、各フォーマットのファイル(WOFF、WOFF2、TTF、SVG、EOT)をアップロードします。

アップロードが完了したら Add Font Variation ボタンをクリックして別の太字のフォントをアップロードします。 Noto Sans JPフォントの太さについては、下記をご覧ください。

  • NotoSansJP-Thin:100
  • NotoSansJP-Light: 300
  • NotoSansJP-Regular: 400
  • NotoSansJP-Medium: 500
  • NotoSansJP-Bold:700
  • NotoSansJP-ブラック:900

すべての太字のフォントをアップロードしたら」公開「ボタンをクリックしてフォントを公開します。

WordPress エレメンタプロカスタムフォント公開

アップロードしたフォント全体(太字)のリストが表示されます。 フォントを削除または追加できます。

WordPress エレメンタプロカスタムフォントを使う - フォント一覧

今エレメントで作業するとき 스타일 タブの 書体 セクションでカスタムフォントを選択して適用できます。

WordPress エレメンタプロカスタムフォントを適用する

"DiviテーマにGoogle Webフォントを適用する(ハングルフォントの変更)「に記載されているように、次のCSSコードを ルックス » カスタマイズ » 追加 CSSに加えて、サイト全体にNoto Sans JPフォントを適用することもできます。

*:not(i):not(.fa):not(.ab-icon):not(.ab-item):not(.dashicons) { font-family: arial, 'Noto Sans KR', sans-serif; }

参照


コメントを残す

コメント