Adobeが提供するWebフォントサービス『Typekit』とは?

従来のフォントは、閲覧しているユーザーの端末にインストールされていないと、別のフォントで表示されるというデメリットがありました。しかし、Webフォントはユーザーの環境に左右されることなく、同一のフォントを表示することができます。これはマルチスクリーン時代に、ウェブサイトの一貫性を持たせる上で大きなメリットとなります。

様々なWebフォントサービスがありますが、今回はAdobe Typekitをご紹介します。

Adobe Typekitとは?

Adobe Typekitは、Adobeが提供するCreative CloudのWebフォントサービスです。Webフォントを利用したいドメインを登録すると、コードが提示されて、それをサイトのHTMLに入れることでTypekitにある豊富なWebフォント(現在欧文フォントのみですが)を利用できます。

しかも、手順も非常に簡単です。早速利用してみましょう。

Adobe Typekitを利用する

1. Adobe IDでログイン

まずは、こちらのページからAdobe IDでログインします。

2. フォントを選択してキットを作成

使いたいWebフォントを選択して、キットを作成します。

キットとは、Webフォントを適用するページに埋め込むコードのことです。名前にはウェブサイトの名前、ドメインにはウェブサイトのドメインを入力します。そして続行をクリック。

表示された埋め込みコードを、HTMLの<head>に埋め込みます。

<script type="text/javascript" src="//use.typekit.net/dpk4tsu.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

これで準備完了です。

3. Editorを使って設定をする

あとは、Editorを使ってフォントを適用するCSSセレクターなどの設定を行います。セレクターに追加されていないCSSでは反映されないので要注意。

他にも、左下の設定で太字や斜体などの設定を追加できます。これにチェックを付けすぎると読み込みが遅くなるので、こちらもご注意ください。

セレクターの項目にある『CSSでフォントを使用』を見ると、サンプルが表示されます。

設定が完了したら、公開をクリックするとウェブサイトへ反映されます。この反映は若干タイムラグがあるようです。

前述でも書きましたが、ウェブサイトの一貫性はマルチスクリーン時代に必須となります。レスポンシブウェブデザインとWebフォントは採用しておきたいところですね。

(Photo: Adobe Typekit)

  • f
  • t
  • p
  • h
  • l
  • n