WebflowでAdobe Fontsのカスタムフォントを使用する方法

過去にウェブプロジェクトでGoogleフォントを使用したことがあるかもしれませんが、プロジェクトに最適なフォントを常に見つけられるわけではありません。

Adobe Fonts（以前はTypekitと呼ばれていました）は、Adobe Creative Cloudのサブスクリプションに含まれる別のウェブフォントサービスです。

この記事では、AdobeフォントをWebflowプロジェクトに追加する方法を説明します。

Adobe Fontsに移動し、Adobeアカウントにサインインします

気に入ったフォントを閲覧し、それらをウェブプロジェクトに追加します

Adobe Fonts APIトークンを取得します

Adobe Fonts APIトークンページを訪問し、Adobe FontsトークンAPIを貼り付けて変更を保存します。また、以前に生成した場合は既存のAPIトークンをコピーすることもできます。

APIトークンをWebflowアカウントに統合します

Webflowダッシュボードにログインし、ウィンドウの右上にあるアバタードロップダウンメニューからアカウント設定に移動します。

アカウント設定ページで、統合タブに移動し、Adobe Fonts APIを貼り付けて変更を保存します。

これで、AdobeアカウントをWebflowアカウントに接続しました。

AdobeウェブプロジェクトをWebflowプロジェクトに接続します

Webflowプロジェクト設定ページに移動し、フォントタブをクリックします。Adobe Fontsセクションまでスクロールすると、Adobe Fontsアカウント内のすべてのAdobeウェブプロジェクトが表示されます。現在のWebflowプロジェクトで使用するウェブプロジェクトを選択し、変更を保存します。

DesignerでAdobe Fontsを使用します 🙌

Designerでは、Adobeウェブプロジェクトを通じて追加したすべてのフォントとフォントウェイトに完全にアクセスできます。

追加したフォントをスタイルパネル→タイポグラフィセクションで使用できます。