実質半額!楽天スーパーDEAL 50%ポイントバック アイテム一覧はこちら >
楽天市場24時間限定アイテム!

有名ブランド品が満載!毎日10時更新。

詳しくはこちら

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

Web・副業・パソコン

 

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

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

なお、このブログは僕がはてなブログを使っていたときに書いた記事です。現在はWordPressでCocoonというテーマを使っていますが、Cocoonで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かなり便利に、使いやすくなりましたね。

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

Web・副業・パソコンブログ運営
注文住宅の家づくり&雑記ブログ「ハイクロノート」
タイトルとURLをコピーしました