無料で手軽に使える便利サービスです。Webフォントを提供しているのはGoogleだけではありません。Fonts」を提供しています。Fontsの使い方を紹介します。FontsはAdobeが提供するフォントライブラリサービスです。Typekit」というサービス名でした。CC会員なら追加料金なし!フォントは商用利用もOKです!無料のAdobeアカウントでも約200種類のフォントを利用できますよ。PhotoshopやIllustratorなど、Adobeのツール内で自由に使えるようになります。Fonts同様、指定された簡単なコードを読み込ませるだけでWebサイト上に素敵なフォントを表示できます。どんなフォントが使えるの?フォント一覧をのぞいてびっくり!Adobeの有料プランの会員なら、15,000を超える個性豊かなフォントを使い放題!日本語も数多く揃っています!フォント一覧画面の右上から「日本語モード」に切り替えて日本語フォントを探してみてください。無料アカウントで使えるフォントは、現在180個。日本語フォントは源ノ角ゴシック、貂明朝、平成丸ゴシックなどの7つのフォントが使えます。PhotoshopやIllustratorなどでフォントを使うまずはPhotoshopなどのグラフィックツールでフォントを利用する手順を見ていきましょう。フォント一覧から使いたいフォントの「アクティベート」のスイッチをON!Photoshopをひらくと、フォント一覧にアクティベート(有効化)したフォントが表示されています!Adobe製品以外のツールでもフォントが使えます。こちらはAppleのPagesでフォントを表示した様子。「アクティベートしたのにフォントが表示されない!」という方、焦らなくてOKです。Cloudのデスクトップアプリを起動させましょう(上図のような赤いやつ)。起動していないとうまく同期されません。CloudのデスクトップアプリはPhotoshopなどのAdobe製品をインストールしているなら、一緒にインストールされているはずです。Cloudアプリの「フォント」タブを見てみましょう。アクティベートされているフォントが一覧表示されます。これでもフォントが表示されない場合は、Photoshopを再起動してみてください。Webフォントとしてフォントを使う続いて、Webサイト上にフォントを表示する流れを紹介します。プロジェクトにフォントを追加」パネルが表示されるので、わかりやすいプロジェクト名を入力し、「作成」ボタンをクリックします。除いて記述しましょう。部分のコードを記述します。タグに反映させたいときはCSSに以下のように書きましょう。Fontsを使えばフォントをインストールしたり、Webフォント化する手間もありません。ドキュメント作成、デザインカンプ制作からWebサイトに実装するまでの流れがスムーズに行えますね。注意点としては、当たり前ではあるのですがAdobeを解約したらこれらのフォントは使えなくなります。今まで設定していたフォントも非表示(デフォルト表示)になるので注意しましょう。シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。