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