Adobe Font サイトへの追加と設定方法

Adobe Fontとは

Adobe FontsはAdobeが提供するフォントライブラリサービスです。

Adobe CC会員なら追加料金なしで無料で利用することができます！
AdobeのPhotoshopやIllustratorで使えるのはもちろんですが、Google Fontsのようにサイトに読み込んでWebフォントして使用することもできます。

今回はそのAdobe Fontのサイトへの追加方法についてご紹介します。

Webサイトに追加

Adobe Fonts

上記のサイトから使いたいフォントを探し、以下のコードのアイコンをクリックし、 自分のプロジェクトに追加していきます。

プロジェクトを追加するとコードが表示させるのでScriptタグはHTMLのheadタグ内に追加します。
下のCSSコードは以下のようにmixin で設定すると便利です。

フォントによってはfont-weightで太さを調整できるものもあるので、
mixinは引数でfont-weightを変更できるように設定しました

// デフォルトのfont-weightを700に設定
@mixin FOT-Chiaro($weight: 700) {
  font-family: fot-chiaro-std, sans-serif;
  font-weight: $weight;
  font-style: normal;
}

mixin呼び出し

h1 {
	@include FOT-Chiaro;
}

h2 {
	// font-weightを500で指定したい時
	@include FOT-Chiaro(500);	
}

以上で設定は完了になります。