webflowの使い方 第8弾は、webflowでAdobeフォントを使用する方法です。
フォント選びはwebデザインにおいて大切な要素ですよね。
webflowはデフォルトでは少ししかフォントを選択することができませんが、
安心してください。追加することができるので、
今回はwebflowでAdobeフォントを使用する方法について紹介していきたいと思います！
今回の記事はwebflow universityを参考にしました。
【webflowの使い方】webflowでAdobe Fontsを使用する方法
Adobe Fontsは、Adobeに登録していると追加料金なしで使用することができるツールです。
PhotoshopやLightroom、Illustratorなどの、
Adobe Creative Cloudの有料プランに登録している方は
15,000種のフォントを使用することができます。
Adobe Creative Cloudの有料プランに登録していない方は、
無償プランで6000種のフォントを使用することができます。
結論
・Adobe Fontsにログインする
・APIトークンを取得しwebflowに貼り付ける
・フォントを選びwebflowのheadタグに追記する
それでは、手順を紹介していきます。
【webflowの使い方】Adobe Fontsの公式ページを開きます。
まずはAdobe Fontsの公式ページを開き、右上のアイコンからログインを行います。
ログインができたら、自動的にホーム画面に戻ります。
再び、右上のアイコンをクリックしてください。
メニューが表示されるので、
中央にある、APIトークンをクリックします。
APIトークンをクリックすると、上記のページに遷移します。
ここで、新しいAPIトークンを作成をクリックします。
するとAdobe Fontsをwebflowで使用する際に必要なAPIトークンが作成されます。
こちらのAPIトークンをwebflowに貼り付けるので、コピーをして下さい。
次はwebflowで設定を行って行きます。
【webflowの使い方】webflowにAdobe FontsのAPIトークンを貼り付ける
webflowのサイトに移動したら、
ダッシュボードを開くき、Adobeフォントを使いたいプロジェクトページの
settingページ(以後設定ページ)を開きます。
webflowの設定ページが開けたら、メニューから”Fonts”を選択します。
Fontsをクリックし少し下にスクロールすると、
Adobe Fontsという項目があります。
Abobe Fonts、
Adobe Fonts API token this projectに、先ほど取得したAPIトークンを貼り付け、Save tokenをクリックします。
これで、webflowでAdobe Fontsを使用する準備が整いました。
次は、webflowで使用したいAdobe フォント選びです♪
【webflowの使い方】使用したいAdobe フォントを選びます。
これまでの工程で、webflowでadobe fontsを使用する準備は整いました。
これから、使用したいフォントを選んでいきます。
今回は、A-OTF 見出ゴMB31 Pr6Nを使用する流れで説明していきます。
A-OTF 見出ゴMB31 Pr6Nのフォントページはこちら
使用したいフォントを選択しましたら、右下に表示されている
web プロジェクトに追加 をクリックします。
上記画像のような画面が表示されます。
中央にある、新しいプロジェクト名を入力するか、既存のプロジェクトから選択してください。
という項目で、お好きな名前を入力します。
今回はwebflowで使いフォントなので、webflowという名前にしました。
（僕は既に登録済みなので、未登録の場合の方とは見え方が少し異なっているかもしれません）
次に、保存をクリックします。
すると上記画像が表示されます。
“これらのフォントをwebページで使用するには、
このコードをHTMLの<head>タグ内にコピーします。”
と説明されている通りに、上記画像赤い四角で囲ったコードをコピーします。
次はwebflowを開きます。
【webflowの使い方】Adobe Fontsが反映されているか確認する
以前と同様に、フォントを使用したいプロジェクトの設定ページを開きFontsをクリックします。
Adobe Fontsの項目を見てみると、
「【webflowの使い方】使用したいAdobe フォントを選びます。」で設定した、
プロジェクト名webflowが追加されていますね！
無事に追加されたwebflowをクリックし、Save Changesを忘れずにクリックしてください。
次に、先ほどコピーしたコードを<head>タグ内に貼り付けていきます。
設定ページから、Custom Codeをクリックします。
Add Custom HTML & CSS と、追加したHTMLを記述するページが開けますので、
Head Codeに先ほどコピーしたAdobeフォントを使用するためのコードを貼り付けます。
貼り付けが完了したら、Save Changesを忘れずにクリックしてください。
これで、作業は完了です！
それでは、実際に追加したAdobeフォント「A-OTF 見出ゴMB31 Pr6N」が使えるか試してみましょう！
【webflowの使い方】実際に使ってみる
実際にAdobeフォントが使用できるようになったか確認していきます。
フォントを追加したプロジェクトを開いて、Typographyをみてみると、、、
無事にAdobeフォントが追加されています！！
かわいいフォントですねえ。
本当はモリサワフォントのA1を使用したいのですが、高価な為手が出せず、
A-OTF 見出ゴMB31 Pr6Nを選択しました。
ちなみにA-OTF 見出ゴMB31 Pr6Nも、モリサワが作成しています。
まとめ
結論
・Adobe Fontsにログインする
・APIトークンを取得しwebflowに貼り付ける
・フォントを選びwebflowのheadタグに追記する
Adobeフォントを利用して、よりデザインにこだわりのあるサイトを作成していきましょう！
次回は、webflowでGoogleフォントの使用方法について記事を書きます！
【webflowの使い方シリーズ】 他の実装方法について
他にもwebflowの使い方について記事をアップしています。
参考になるものがあればご覧下さい。
日本でwebflowを学べるオンラインスクール LikePay Academy
webflowは全部英語で、日本語の情報はあまりありませんが
日本でwebflowが学べるオンラインスクールで、LikePay Academyがあります。
オンラインスクール LikePay Academy
とてもオススメです。
LikePay Academyはロシア人のイーゴリさんがwebflowについて詳しく説明してくれています。
講座は、主に動画をみて学んでいくスタイルです。
学習プラン
PRO会員になると
・全学習コンテンツ見放題
・個別メンタリング
・PROコミュニティ
・定期的に開催されるイベントに無料参加
この個別メンタリングはかなり魅力的です。
webflowが学べるLikePay Academyはこちら
.webp)
.webp)
