Typekitでサイトのフォントを手軽に綺麗にする

2017-10-23

TypeKitを使えばドメイン管理者なら無料でサイトのフォントを美しくすることができます。

Adobe Typekit
https://typekit.com/

TypeKitはAdobeのWebフォントサービスです。Webフォントを使うことでユーザの環境に依存せず統一したフォント表示ができます。(一瞬表示にラグがありますが)

Typekitの使い方

まず、Adobe IDを作る必要があります。無料です。

Adobe ID の作成方法
https://helpx.adobe.com/jp/x-productkb/policy-pricing/cpsid_92722.html

IDを持っていれば、Typekitのサイトでログインするとフォントの一覧が表示されます。

フォントを参照
https://typekit.com/fonts

任意のフォントをクリックするとこのような画面になるので、右上の「キットに追加」をクリックします。

ちなみにこのサイトでは源ノ角ゴシック(Source Han Sans)を使用しています。

「キットを作成」に進みます。

ポップアップウインドウが出るので、サイト名とドメインを入力します。無料アカウントの場合は1つのみ指定できます。

SCRIPTタグでできたHTMLコードが表示されるので、これをサイトのHEADタグ内に記述します。HTMLコードはユーザごとに異なります。

完了画面が表示されます。この時点ではまだフォントは反映されません。先ほどのHTMLコードを埋め込んで、CSSでフォント指定し、右下にある「公開」をクリックすると初めて反映されます。

サンプルCSSは完了画面の左上にある「CSSでフォントを使用」をクリックするとこのように表示されます。埋め込みHTMLコードとCSSはいつでも確認できます。

以上です。

それでは素敵なフォントライフを!

Pocket

投稿者:

yagitch(やぎっち)

東京都在住の30代元エンジニア。アマチュアイラストレーター。 Raspberry Piを使ったDIYスマートホームの情報を集めています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください