ハイクロノート -雑記ブログ 30代夫婦の平屋の家づくりや生活のこと-

家づくりやペット、生活のことなどをつらつらを書いていくだけの雑記ブログです。

Adobe FontsはWebフォント商用利用制限なしでTypekitから大幅リニューアル!変更点やはてなブログへの設定変更方法などをまとめました

f:id:grayblack:20181016103839j:plain

こんにちは、grayblackです。

僕は職場でも自宅でもAdobe Creative Cloudを利用しています。

職場のはもちろん会社で契約していますが、
自宅で使うアカウントはもちろん自腹。毎月5000円ちょっとはなかなかキツい……。

さて、今朝起きたらTypekitがAdobe Fontsに変わっててビックリしました。
さっそく新しくなった管理画面などを触ってみたので、そのご紹介をしたいと思います。

 

 

 

Typekitからの変更点まとめ。Adobe FontsはWebフォントも商用利用制限なしに!

Typekitでは複雑だった利用制限が撤廃されシンプルになり、
Adobe Fontsでは以下のとおりになったようです。

  • 同期できるフォントの数が無制限
  • すべてのフォントがWebでもデスクトップでも使用可能
  • すべてのフォントが個人用でも商用でも使用可能
  • Webフォントとして利用する場合のページビュー制限とドメイン制限も撤廃
  • Adobe IDさえ持っていれば、Creative Cloudサブスクリプションを購入していなくてもフォントの基本コレクションが無償で使用可能

これは神アプデと言わざるを得ませんね。

ドメイン制限がなくなったのはかなり便利ですね!

Typekitのときはビジネスプラン(だったかな?)じゃないとお客さん(企業)のサイトでWebフォントが使えませんでしたが、これでようやく使えるようになったってことでしょうか。

はてなブログにおけるTypekitからAdobe Fontsへの設定変更

僕はJavaScriptのコード埋め込み方式でこのブログでもTypekitのフォントを利用していましたが、埋め込み用のコードも変わっています。

ここからは実際に行った設定変更の流れを簡単にご紹介します。

※JavaScriptのコード埋め込みの場合です。

 

① Adobe Fontsにログイン

Adobe Fontsのホーム画面へ。右上のログインボタンをクリック。

f:id:grayblack:20181016094803p:plain

いつものAdobe IDでログインします。

f:id:grayblack:20181016094757p:plain

 

② ログイン完了したら画面左上にある「Typekit Webフォント」をクリック。

明らかに画面が見やすくなっていますね。

f:id:grayblack:20181016094753p:plain

 

③ 「マイWebプロジェクト」をクリック。

Adobe Fontsでは「プロジェクト」という名称になったようです。
Typekitのときは「キット」という名前でしたかね、たしか。

f:id:grayblack:20181016094750p:plain

 

④ ブログで使っているプロジェクトのコードをコピー

Typekitで登録していたサイトがこのページで一覧表示されます。ブログで使っていたプロジェクトを探し、「プロジェクトを埋め込み」部分にあるコードをコピーします。

f:id:grayblack:20181016094744p:plain

 

ちなみに、先ほどの画面で「詳細を表示」をクリックすると、実際に使うフォントを選択することができます。

Typekitのときより分かりやすい。

CSSをコピー」をクリックすると、CSSで記述するコード(font-family, font-weight, font-style など)がクリップボードにコピーされます。

 

f:id:grayblack:20181016094732p:plain

⑤ はてなブログの管理画面にコードを貼り付ける

はてなブログの管理画面へ。

[設定]>[詳細設定]の中にある「headに要素を追加」欄にコピーしたコードをペーストします。

以前のTypekitで使用していたコードは削除しました。

f:id:grayblack:20181016094738p:plain

 

以上で設定完了です。

変更が反映されるまでに時間がかかるかもしれません。

また、CSSの記述方法自体は変わっていませんので、
使うフォントが変わっていない場合は何もしなくてもいいと思います。

 

▼ はてなブログのCSSの設定画面。とくに変えなくてもいいですが、僕はこのタイミングで新しいフォントに変更したのでそれを追記しました。

f:id:grayblack:20181016094726p:plain

 

Illustrator 2019ではこのAdobe Fontsが統合される

ブログとは直接関係ありませんが、Illustrator 2019では「Creative Cloudメンバーは、Adobe Fontsの直接統合により、15,000以上のフォントすべてにIllustrator CCから直接アクセスできます。」とのことです。

2018までは、Typekitからフォントを同期しなければいけませんでしたが……。

 

Illustrator CC 2019にアップデートして実際に試してみたところ、
フォントを選択する画面に「Adobe Fontsからすぐにフォントをアクティベート」という表示があり、
それぞれのフォントの右端にあるアイコンで
すでにアクティベートされているのかどうかが確認できます。

アクティベートしたいフォントを選択して、
クリックするだけでフォントがアクティベートされすぐに反映することができます。

 

f:id:grayblack:20181017160803p:plain

 

これは神アプデですね……。(2回目)

 

さいごに

Adobe Fontsかなり便利に、使いやすくなりましたね。

商用でも自由に使えるようになったということで、
自分の仕事においても大きな転機となることは間違いなさそうです。