Elementor Proの使い方

Elementor Proでカスタムフォントを追加する方法

Elementorは、ドラッグ&ドロップでページでデザイン性の高いページを作成できるWordPressのプラグインですが、日本語で使う場合は用意されているフォントが1種類しかありません。サイトによっては、特定のフォントを使いたいとか、同じページでも強調するために異なるフォントを使用したいという場合があると思います。

今回は、Elementor Proでいろんなフォントを使いたいと思っている方のために、カスタムフォントの追加方法をご紹介していきます。

チェック!Elementor Proは有料のプラグインです。こちらから、契約をしてから記事の続きをご覧ください。

Step1. フォントをダウンロードする

Googleとかでフォントを検索していただくとたくさんのサイトがヒットすると思いますので、まずは、検索をかけて、追加したいフォントをダウンロードしてきましょう。おそらく、zipファイル形式になっているので、解凍します。

Step2. OTFファイルをTTFファイルに変換する方法

ダウンロードしてきたファイルによっては、拡張子がOTFというファイルになっていると思います。そのファイルは、Elementorに追加できないので、TTFファイル等に変換しないといけません。なので、OTFファイルの場合はTTFファイルに変換する作業をしていきましょう。

AnyConv

いろんなサイトやツールがありますが、今回は、AnyConvというサイトをご紹介します。使い方は非常に簡単で、「CHOOSE FILE」という赤いボタンからOTFファイルをアップロードするだけです。もし、ボタンが機能しない場合は、ドラッグ&ドロップでファイルを追加してみてください。

AnyConvで「CONVERT」ボタンをクリック

そして、「CONVERT」ボタンをクリックします。

AnyConvで「DOWNLOAD .TTF」ボタンをクリック

すると、10秒程度でファイルを変換してくれるので、あとは「DOWNLOAD .TTF」ボタンをクリックしてダウンロードしましょう。

Step3. ElementorのCustom Fontからフォントを追加する

最後に、Elementorに追加していきます。

Elementor Custom Fonts

まずは、「Elementor」の項目にある「Custom Font」に移動します。

Custom FontsのAdd Newボタン

そして、「Add New」ボタンをクリックします。

Elementor カスタムフォント 名前を入力し「ADD FONT VARIATION」

次に、フォントに名前をつけて、「ADD FONT VARIATION」ボタンをクリックして、ファイルを追加していきます。

Elementor カスタムフォントの追加

この画面になるので、「TTF File」の項目で「UPLOAD」ボタンをクリックしてファイルを追加します。完了したら、「公開」しましょう。

Step4. 追加したフォントが使えるかチェックする

そして、最後に追加したフォントが編集画面で使用できるか確認してみましょう。

Elementor 編集画面 フォントを選択

見出しやテキストエディターなどのテキストを入力するウィジェットを追加して、「スタイル」に移動します。そのタブの「書体」を開き、「フォント」を確認してみてください。「カスタムフォント」の下に追加したフォントが表示されていると思います。あとは、選択をして、実際にテキストのデザインが変わるかチェックしてみましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です