ElementorをAdobe Fontsと連携する!

無敵です。
Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加

ElementorをAdobe Fontsと連携する!

連携すると何が便利なのか?

 Elementor ではサイト内の要素に対して書式を設定することが可能です。書式設定の内容にはフォントの選択があり、Adobe Fontsと連携することによって選択できるフォントに連携済みのフォントが表示されるようになります。つまり一回連携してしまえばサイトの好きな場所へAdobe Fontsのウェブフォントをプルダウンで適用することができるようになるのです。

 今回の設定はAdobe Fontsの契約とElementor  Proの契約が必要になります。

Adobe Fontsでの準備

 AdobeFontsで選んだフォントをウェブに使うには、まずAdobe Fontsで使いたいフォントを選択してWebプロジェクトというセットを作成する必要があります。

  例えばVDLロゴ丸Jr を使いたいとします。

 </>Webプロジェクトに追加ボタンをクリックします。もちろんAdobe FontsがAdobeとの契約に含まれていることが前提です。

 プルダウンで既存プロジェクトへフォントを追加しても良いですし、新規のプロジェクトを作成しても構いません。ここではcrftというプロジェクトへ追加しました。

 フォントが追加された旨のメッセージとコピーするためのスクリプトが表示されますが、ここではそのまま閉じてしまいましょう。

 A のMy Adobe FontsをクリックしてB のWeb プロジェクトをクリックします。左上に青い文字でcrftと表示されているのがプロジェクト名です。C の部分は後でElementorと連携するために必要になるプロジェクトIDです。D の部分もElementorの設定画面で入力する必要があります。

 このウインドウは開いたままにしてElementor の設定画面へ移動します。

Elementorでの準備

 Elementor にはAdobe Fontsとの連携オプションが実装されています。

連携の設定

 Wordpressの管理画面でElementor >設定>連携へと進み、ページの下方までスクロールしてAdobe Fontsというセクションを見つけます。

 このセクションのProject IDにAdobe Fontsで発行された前ステップのCにあたるプロジェクトIDを入力してSync Projectをクリック、変更を保存をクリックします。

headの設定

 Elementor >Custom Codeへと進み、新規を作成します。

 E のタイトルは適当な名前で構いません、自分はAdobe Fontsと名前を入れました。F にはカスタムコードを入力したい場所、今回は<head>を選択します。 G にはAdobe Fontsの準備で取得した D のコードを貼り付けます。

これはテストのテキストです。

 設定内容が正しければこのようにウェブフォントをElementor の書式設定からプルダウンで選択することができるようになります。

まとめ

 Adobe CCとElementor Proの契約は必要になりますが、もうこの手軽さはデザイナーにとってはうれしい限りです。Elementor Pro、いよいよページビルダーのスタンダードだと思います。そして”ウェブはなぁ~”とか言っているデザイナーのそこのアナタ、今こそいっちゃうべきです。Elementor こそあなたのソリューション!