Adobe Fonts をElementorで利用

Adobeの有償プランを契約している方なら誰でも利用できるAdobe Fonts をElementorで利用する方法を書きます。

まず利用したいAdobe Fotnsからフォントを選び、HEADタグにJSを入れ、cssのfont familyを入れる流れになります。
ではいってみましょう!

まずWordPressにcss,jsを追加できるプラグインを入れておきます。


Simple Custom CSS and JSプラグイン
https://ja.wordpress.org/plugins/custom-css-js/

続いてAdobe Fontsサイトより
https://fonts.adobe.com/
フォントを選択してアクティブにします。


ここでは「日本語」検索して、VDL ロゴjrブラックをアクティブにしました。

右上の「Webプロジェクトに追加」>プロジェクト名を入力し作成ボタンを選択。
コード部分をコピーしてWordPressのHEADタグに追加します。


さきほど入れたSimple Custom CSS and JSプラグインを
WordPressの左側メニューから選択し、この図のように追加します。

CSSはElementorのページ設定から詳細>Custom CSSに追加します。


ここではadobefontクラスにAdobe Fontsを適用したいのでこのようにしました。

続いて
見出しウィジェット>詳細>CSS クラスに「adobefont」と入力。

デモ
https://elecre.net/testfont/

他のWeb Fontの記事
https://elecre.net/category/webfonts/

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.