SHIDEN DESIGN BLOG

thumnail_20170320

CreativeCloudユーザーだったら使わないと損?Adobe TtpeKitの日本語WEBフォント

SponsorLink

観覧者のデバイスにインストールされていなくても、指定したフォントを表示できるWebフォント。
GoogleFontsなど、豊富なフォントを無料で利用できるサービスもあり、近年では多くのWebサイトで利用されています。
 
日本語の場合は、GoogleFonts+日本語早期アクセス等、無料のサービスもありますが、使用できるフォントは少ないのが現状です。
モリサワのTypeSquareや、フォントワークスのFONTPULUS等、素晴らしいフォントを豊富に揃えた有料サービスもありますが、普段フォントを購入する習慣のない人にとっては、どうしても高価に思えてしまうかもしれません。
 

Adobe Typekitとは

 
Adobeの各アプリケーションやWebサイトで使用できるフォントを提供するサービスです。
CreativeCloudのユーザーであれば、初めからポートフォリオプランが含まれていますので、全てのWebフォントをサイトの制限数なく500,000ページビュー / 月で使用できます。
 
現在、日本語フォントは34種類あり、モリサワやタイプバンクのフォントも利用することができます。
 

使い方

 
Typekitにログインして、フォント一覧を選択します。
 
ここでは、先にキットを作成します。
右上の「キット」から「新しいキットを作成」を選択します。
post_image_20170320_01
 
 
次に、自分が管理しやすい名前をつけ、Webフォントを使用するサイトのURLを入力します。
post_image_20170320_02
 
 
「続行」を選択すると埋め込みコードが表示されるので、Webフォントを使用したいWebサイトの<head></head>内に貼り付けます。
この埋め込みコードは、後で「キット」から確認することができます。
post_image_20170320_03
 
 
キットのウィンドウを閉じて、フォント一覧に戻り「日本語」を選択します。
使用したいフォントを選択しましょう。
ただし、全ての漢字に対応していないフォントもあるので注意してください。
 
使用したいフォントを決めたら、キットに追加を選択します。
post_image_20170320_04
 
 
「既存のキットに追加」の中から、上記で作成したキットを選択します。
post_image_20170320_06
 
 
「キット」に追加したフォントの中から使用したいフォントを選択し「CSSでフォントを使用」を選択すると、一番上に表示されるフォント名を、委任のタグ、クラス、idのfont-familyに指定するだけです。
post_image_20170320_07
post_image_20170320_08
 
 

 

 
 

吾輩はhogeである

意味はまだ無い。
どこで生れたかとんと見当けんとうがつかぬ。
何でも薄暗いじめじめした所でpiyopiyo泣いていた事だけは記憶している。

 

最後に

 
今回は日本語Webフォントと言う事で、日本語での使い方を説明ましたが日本語でない場合も、使い方は同じです。
また、Webフォントとしてだけでなく、フォントを同期させることでAdobeの各アプリケーションでフォントを使用することができます。
なかには、購入すると高価なフォントも含まれていますので、それだけでもお得な感じがしますよね。
 
 

SponsorLink

Related Articles