コーディングでカンプを確認するとGoogle fontsではなくAdobe Fontsが使われていた…どうやって使おう？と困った方も多いのではないでしょうか。
本記事ではAdobe Fontsの基本的な使い方に加えて、Figmaとカンプで太さに差が出てつまずいた経験から、コーディング時の注意点もまとめました！
そもそもAdobe Fontsって？
Adobe社が提供するサブスクリプション型のフォントライブラリサービスで、3万種類以上の高品質なフォントを追加料金なしでPCやWebサイト上で利用でき、商用利用も可能です。
実際の使い方
1.アカウントログイン後、使いたいフォントを検索します。
2.画面右上の「Webプロジェクトに追加」を押します。
3.新しいプロジェクトを作成するか、既存のプロジェクトを選択します。使用する太さにチェックを入れて右下の「作成」ボタンを押します。
4.埋め込みコードが発行されるので、それをHTMLの<head>内に貼り付けて、埋め込みコード下のCSSを追加することでサイト内で使用できます！
注意点
1.クライアント案件で使用したい時
利用規約の関係で先方のアカウントでプロジェクトIDを発行していただく必要があります。
詳しくはAdobeのヘルプをご確認ください。
2.Figmaでの注意点
Figmaで表示されている太さとAdobeでの太さに差異が出ている可能性があるので、コーディングの際はAdobeを参照するようにしましょう。
例）Pressio No.34 Bold CompressedはAdobe上ではfont-weight:600になっているが、Figmaで確認するとfont-weight:700が適用されている。
Adobe上
Figma上
プロジェクトの編集について
<head>で読み込んで、cssも当てているのになんかカンプと太さが違うかも…?となった場合当てたい太さが読み込めてないのかもしれません！
画面右上の「フォントを管理」の「Webプロジェクト」から該当のプロジェクトを編集して再度追加しましょう。
以上、Adobe Fontsの導入手順とコーディング時の注意点でした。