Adobe FontsでWebフォントを設定する方法まとめ

Adobe FontsでWebフォントを設定する方法まとめ

こんにちは。
Adobe MAX JAPANを見に行きたいな〜となんとなく思っていたんですけど、あれって申し込み9月開始なんですね、、来年こそは必ず。。

さて、この前仕事でAdobe Fontsを使うことがあったのですが何気に使うのが初めてだったので、Webフォントとして使う方法を簡単にまとめたいと思います。

Webフォントを用いることで、このようにどのブラウザ / デバイスでも同じように指定したフォントを表示させることができます。

Adobe Fontsについて

Adobe Fontsとは、2018年10月のアップデートAdobeのフォントライブラリサービス“Adobe Typekit”がリニューアルされたもので、Typekitとの一番の違いは複雑な利用制限がすべて撤廃され、非常にシンプルに使うことができるようになったことです。

これまでのTypekitでは、ローカルで同期できるフォント数などライセンスによって多くの制限がありましたが、Adobe fontsに収録されているフォントはすべて個人用でも商用でも利用可能になりました。

Webとデスクトップの区別もなくなり、Webフォントのページビュー制限とドメイン制限も撤廃され非常に使い勝手がよくなっています。

Web サイトへのフォントの追加方法

使用するフォントの選択

Adobe Fontsのフォントライブラリにアクセスし、お好みのフォントを探します。
ログインできていないときはページ右上の「ログイン」からAdobe Accountにログインします。

Adobe Fontsのライブラリ画面

左側のメニューからフォントを絞り込むことができ、分類(serif、sans serif など)/プロパティ(x-height、幅、太さ)などでジャンル分けされています。

日本語フォントのコレクションには異なるフィルターオプションが用意されており、今回は日本語フォントの筆書体「TA香蘭」を選んでみました。

フォントを決めたら、</>マークをクリックしてコードを取得します。

また、フォント名をクリックすると、そのフォントで使用できるすべてのファミリーとフォントについての情報が表示されます。

フォントの情報が表示されているページ

Webフォントのコードを取得

</>マークをクリックするとモーダルが表示されるため、以下の手順でWeb プロジェクトに名前を付け、プロジェクトに含めるフォントを決定します。

  1. 「新しいプロジェクトの作成」を選択します。
  2. Webプロジェクトに名前を付けます。
  3. プロジェクトに含めるフォントの太さとスタイルを選択します。
  4. 保存を押してプロジェクトを作成します。

プロジェクトの設定は、後から「My Adobe Fonts」ページで変更することもできます。

今回はWebプロジェクト名を「T_times」にし、レギュラーウェイトしかないフォントのためレギュラーのみにチェックを入れて保存しました。

保存するとコードが表示されるので、それを全てコピーします。

下準備は以上となります。

Webフォントの適用

htmlの<header>タグ内に先ほどコピーしたコードを記述します。

続いてcssの任意のセレクタ内に、上の画像のfont-familyを追加します。
何らかの原因で読み込まれなかった時のために、後ろにデフォルトで設定してあるfont-familyも追加しておきます。

以上の手順で、Webフォントを割り当てることができます。

まとめ

Webフォントを用いることで、ブラウザやOSによるフォントの違いなどを気にすることなく、全く同じ表示を実現できます。

どんなプラン契約であれAdobeユーザーであれば誰でも使うことができるので、ぜひ一度使ってみてください。

それでは〜。

web制作カテゴリの最新記事

ページトップへ戻る