;
SERVICE

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

shadow
adobe-typekit
matsushita

Author :  

shadow
adobe-typekit
  • Recruit
  • Recruit

Adobe 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フォントを選択して、キットを作成します。

what-is-adobe-typekit

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

what-is-adobe-typekit-2

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

これで準備完了です。

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

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

what-is-adobe-typekit-4

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

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

what-is-adobe-typekit-3

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

what-is-adobe-typekit-6

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

(Photo: Adobe Typekit)

SERVICE
  • sns