必要条件

この記事に必要な予備知識

HTMLに関する一般的な知識。

 

説明の対象となる製品

ユーザーレベル

すべて

調査によると、5人中5人のWebデザイナーが、多くのWindowsおよびMacコンピューターにインストールされているわずかなフォントだけでは、最も単純なデザインプロジェクトでもまったく不十分であるという意見を持っています。

古臭いTimes New Romanや堅苦しいArialがフォントの世界で幅を利かせていますが、真剣にデザインをしているユーザーは何時間もかけて適切なフォントを探すのがどれほど大変であるかを知っています。

フォント探しが時間のむだであると考えているなら、Errol Morris氏によるNew York Timesの記事「Hear, All Ye People; Hearken, O Earth (Part One)」(汝らよ聞け、地よ耳を傾けよ(第1部))が役に立つかもしれません。Errol Morris氏は、書体が人々の真実の認知にどのように影響するかについて調査した結果を紹介しています(フォントマニア、真実の探求者、興味深い調査プロジェクトが好きな人には、この記事がお勧めです)。

フォントに問題があり、十分な選択肢がないことを既に確信しているユーザーにとって、@font-face CSSルールにより、Webページでほとんどすべてのフォントを使用できるようになったことは朗報に違いありません。

新しいフォントの選択肢と、他の刺激的なCSS3の追加機能(テキストのシャドウやグラデーション)とを組み合わせることによって、Photoshopでスタイル設定したテキストを含む画像を作成するという古い回避策に頼らずに、すばらしいテキスト処理を実現できます(実際の@font-faceルールの例については、図1を参照してください)。

画像内でテキストを使用する代わりに、テキストと@font-faceルールを使用することには、次のように多くの利点があります。

  • テキストは画像よりも読み込みが速い。
  • HTMLとCSSで書式設定されたテキストは、画像内のテキストよりも更新が容易である。
  • キーワードを画像内に隠すよりも、ページのテキストに含める方が、検索エンジンでのランクが上昇する場合がある。
  • 画像の代わりにテキストを使用することによって、スクリーンリーダーやその他の特殊なブラウザーを使用する、身体に障害のあるユーザーがWebページにアクセスしやすくなる。
  • テキストを選択およびサイズ変更することができる。

@font-faceルールの仕組み

@font-faceルールの使用は、最初はとても簡単なように見えます。基本的には、2つのステップが必要です。最初に、@font-faceルールを使用して、Webサーバーでホストされるフォントにリンクします。次に、CSSルール内のfont-familyプロパティでフォントを使用します。とても簡単です。

これらの基本的な手順を理解すると、ハードディスクにあるすべてのフォントをWebサーバーにアップロードし、@font-faceルールを使ってリンクすれば準備は万端 であると考えたくなります。残念ながら、Web上の多くのことがそうであるように、Webページでフォントをホストおよび使用することは、想像以上に多くの理由があり、思っているよりも複雑です。

まず、フォントデザイナーには権利があります。このことが間違っていると考えているわけではありませんが、これにより状況が複雑になっています。フォントの著作権の複雑さや、既に1人のWebデザイナーがWebフォントの生成で訴えられている状況については、CopyHype.comの「Copyright and Web Fonts」(著作権とWebフォント)を参照してください。

問題をさらに複雑にしているのは、あるフォントをWebサーバー上でホストする権利があるとしても、その文字をMacおよびWindowsコンピューターで正しく表示したり、すべてのWebブラウザーで機能させるために必要な、そのフォントのすべてのバリエーションがそろっていない場合があるという点です。

これらのすべての要因が組み合わさって、独自のWebフォントをホストすることを想像以上に複雑にしています。これが多くのユーザーがTypekit、Font Squirrel、Google Web Fontsなどの一般的なフォントサービスのいずれかを使用している理由です。

ただし、すべてのフォントサービスが同じように動作するわけではありません。実際、この一般的な3つのサービスでは、まったく異なったアプローチでWebデザイナーがフォントを利用できるようにしています。Font Squirrelでは、ユーザーがフォントをダウンロードし、そのフォントをユーザー独自のWebサーバーにアップロードできるようにしています(Font Squirrelがユーザーの権利とフォントオプションを管理します)。Google Web Fontsでは、Google Web Fontsのサーバー上でホストされているフォントに容易にリンクできるようにしています。Typekitのアプローチはまったく異なっており、より複雑なアプローチであるため、この記事の最後に説明します。

筆者の見解では、@font-faceルールの使用に関するWebデザイナーの混乱の多くは、一般的なフォントサービスの多くが、Webフォントを管理する方法と、Webデザイナーが自分のWebページでこれらのフォントを使うための手順について、このように異なったアプローチをしていることに原因があります。各フォントサービスについて個別に説明する理由はここにあります。

このチュートリアルの目標は、まず、フォントサービスに関してオプションの範囲を理解できるようにすること、次に各フォントサービスを使用するための基本的な手順を説明し、より多くの情報に基いて自分に最適なフォントサービスを決定できるようにすることです。

フォントサービスには多くの種類があり、1つの記事で説明することはできないので、ここではTypekit、Font SquirrelおよびGoogle Web Fontsを取り上げることにしました。なぜなら、これらが最も一般的な選択肢であり、Web上のフォントの管理について3つの異なるアプローチを示しているからです。これら3つおサービスの仕組みが理解できたら、他のほとんどすべてのフォントサービスについても、その概要を把握し、情報に基いた評価を行うことができるはずです。

Google Web Fontsの使用

最初に、GoogleのWebフォントサービスについて説明します。これは、最も良いからというわけではなく、最も使いやすく、しかも無料であるからです。予算の制約があり、膨大なフォントのコレクションから選択する必要がない場合は、Google Web Fontsを使用すれば、簡単にいくつかの新しいフォントの選択肢をWebサイトに追加できます。

覚えておかなければならない制限事項がいくつかあります。GoogleのWebフォントは、すべてが無料のフォントで、複数のフォントスタイルを提供するものはほとんどありません。様々なフォントスタイルを使用したい場合は、TypekitやFont Squirrelの方が適しています。

また、Googleのホストされるフォントサービスを使用する場合、Googleサーバー上のフォントにリンクしています。Googleのサーバーの信頼性は高い方ですが、そのサーバーがダウンした場合は、すばらしいフォントは使用できなくなり、代わりに古臭いデフォルトのフォントでテキストが表示されます。

Google Web Fontsサイトから任意のフォントをページに追加するには:

  1. Webブラウザーを開き、www.google.com/webfontsにアクセスします。
  2. 大きな青い「Start Choosing Fonts(フォントの選択を開始)」ボタンをクリックします(図2を参照)。
  1. このサイトで利用可能なすべてのフォントから検索することも、左の欄の「Filters(フィルター)」を使用して検索対象を絞り込むこともできます。「Grumpy Wizards」が好きではない場合や、他の独自の語句が選択したフォントでどのように表示されるかを確認したい場合は、画面の上部にある「Preview Text(テキストのプレビュー)」フィールドを編集することによって、各フォントで表示されるテキストを変更できます(図3を参照)。
  1. 好みのフォントを探し、フォント名のすぐ下の右下隅にある「Quick-use(すぐに使用)」リンクをクリックします。
  2. Webページで使用したい各フォントスタイルの横にあるチェックボックスをクリックします(図4を参照)。

注意:Google Font Directoryにあるほとんどのフォントで、スタイルは1つだけですが、複数のスタイルがあるものもあります。すべてのスタイルを選択したくなりますが、使用するスタイルだけを選択することをお勧めします。Googleが警告しているように、選択するフォントスタイルが多くなるほど、フォントをページにダウンロードするのにかかる時間が長くなります。

  1. ページを下へスクロールして、「Latin」チェックボックスをクリックするか(英語の場合)、別の言語用に追加の文字が必要な場合は「Latin Extended」チェックボックスをクリックします。
  2. さらにページを下へスクロールして、3つのタブがある青いボックスを表示し、最初のタブを選択して、フォントをWebサイトにリンクします。
  3. Googleでは、「Standard」、「@import」、「JavaScript」の3つのオプションが提供されています。リンクがこれらのオプションの中で最もシンプルです。他の2つのオプションについて詳しくは、Googleのサイトを参照してください。
  4. Webページからテキストやコードをコピーする場合と同様に、Googleからリンクをコピーします(図5を参照)。
  1. Dreamweaverまたはその他のテキストエディターやHTMLエディターでWebページを開き、Webページのhead領域の開く<head>タグと閉じる</head>タグの間にリンクをペーストします。
  2. Google Web Fontサイトに戻り、同じページの少し下で、フォントファミリー名をコピーします。
  3. Webページに戻り、フォントを使用したいCSSルールにフォントファミリー名をペーストします。
  4. Webページのテキストにルールを適用します。
  5. Google上のリンクしたいフォントを含めるタグ、クラスまたはIDスタイルを作成できます。スタイルルールにフォント名を入力するだけです。図6の例では、見出しタグ<h1>のタグスタイルでこのフォントを使用し、<h1>タグを使用してテキストを書式設定しました。

注意:Dreamweaver CS5またはCS6でフォントを表示するには、ワークスペースの上部にある「ライブビュー」ボタンをクリックする必要があります。ライブビューでは、Apple SafariおよびGoogle Chromeで使用されているものと同じWebKitエンジンを使用するプレビュー表示を提供します。

  1. 最後の手順:ページをWebサーバーにパブリッシュして、Webブラウザーでページをプレビューします。

Webページ上でフォントが表示されることを確認するには、常にオンラインにパブリッシュした後でページをプレビューすることをお勧めします。また、Googleのホストされるフォントサービスを使用する場合、Googleサーバー上のフォントにリンクしていることを忘れないでください。Googleのサーバーがダウンしている場合や、その他の理由で自分のサイトとGoogleのサイトの接続が切断された場合、テキストはGoogleのフォントでは表示されません。

Adobe Edge Web Fontsの使用

オンラインフォントファミリーの最も新しいメンバーが、Adobe Edge Web Fontsサイトです。Edge Web Fontsを作成するために、アドビはGoogleと提携しました。そのため、Google Web FontsとEdge Web Fontsはよく似ているので、ここではその手順を詳しく説明しません。

Google Web Fontsと同様に、Edge Web Fontsは無料で使いやすく、さらにこのサービスはアドビの一部のツールに統合されています。このサービスおよびアドビとGoogleのパートナーシップについて詳しくは、ブログの記事「Introducing Adobe Edge Web Fonts」(Adobe Edge Web Fontsの概要)を参照してください。このサービスはTypekitの機能を利用しているので、同じ標準ベースのフォントサービスの方法と同じグローバルフォントサービスネットワークが使用されること、完全に無料であること、アカウントやキットの構成が不要であることを意味します(これについては、この記事の最後のTypekitについてのセクションで説明します)。

Google Web FontsとEdge Web Fontsは似ていますが、どちらかを選択する理由がいくつかあります。例えば、これらのサービスではすべてのフォントが同じであるわけではないので、Google Web Fontsで必要なフォントが見つからない場合、Edge Web Fontsで見つかる場合もあります(逆の場合もあります)。また、2つのサービスでは、フォントの読み込みオプションも異なります(仕組みについては、Edge Web Fontsの「URL Specifications」(URLの指定)を参照してください)。

他の新しいサービスと同様に(Adobe Edge Web Fontsは、この記事の執筆時点の数週間前にリリースされました)、数週間から数か月間の間に変更や機能向上が行われることが予想されます。パートナーシップの一部として、Typekit、Adobe Type、Google Web Fontsのチームメンバーが協力して、これらすべてのフォントサービスにおいてレンダリングとパフォーマンスの向上に努めています。

Font Squirrelからのフォントキットのダウンロード

この記事で説明されている他の2つのオプションとは異なり、FontSquirrelはホストされるサービスではありません。Font Squirrelでは、無料のフォントの限られたコレクションから選択するか、プレミアムフォントの1つを購入します。次に、このサイトからコンピューターにフォントをダウンロードし、最後に、WebサイトをパブリッシュするときにWebサーバーにフォントをアップロードする必要があります。

Font Squirrelで行っていることはフォントキットの提供です。フォントキットは、パッケージ化されたフォントコレクションで、Webサイトでフォントを使用するために必要がすべてのフォント形式およびCSSやHTMLのコードが含まれます。

Font Squirrelは@Font-Face Generatorも提供します。これを使用して、Webで必要なすべてのフォント形式を作成できます。注意:前に述べたように、Webサーバー上でのフォントを使用する権利が必要であり、@Font-Face Generatorを使用するときに、FontSquirrelによってこの要件が示されます。

パッケージ化された@font-faceキットをダウンロードする場合も、ジェネレーターを使用して独自のフォントを作成する場合も、Font Squirrel(およびWebフォントをダウンロードできる他のすべてのWebサイト)のフォントを使用する手順は同じです。

FontSquirrelの@Font-FaceキットをWebサイトで使用するには:

  1. ブラウザーでwww.fontsquirrel.comを開き、サイトの上部のナビゲーションバーにある@font-face Kitsのリンクをクリックします(図7を参照)。
  1. @Font-Face Kitsのページをスクロールし、小さい「Get Kit」リンク(リスト表示されたフォント名のすぐ下にある)をクリックすると、すぐに@font-faceキットがダウンロードされます(図8を参照)。

フォント名で検索して、Font Squirrelでそのフォントのページを開き、そのページから@font-faceキットをダウンロードすることもできます。このオプションを選択した場合は、TTFバージョンではなく、@font-faceキットのボタンをクリックしてください(図9を参照)。

  1. @font-faceキットをどのようにダウンロードしたかに関係なく、コンピューターにダウンロードされたZIPファイルを展開する必要があります。Macでは、ファイル名をダブルクリックしてZIPファイルを展開できます。Windowsでは、ファイル名を右クリックして「すべて展開」を選択します。
  2. Dreamweaver CS6を使用している場合は、フォントマネージャーを使用して、@font-faceキットからスタイルにフォントを追加できます。このチュートリアルの残りの手順では、Dreamweaverで新しいフォントマネージャーを使用する方法について説明します。Dreamweaver CS6を使用している場合は、手順5に進んでください。

    以前のバージョンのDreamweaverを使用している場合や、その他のテキストエディターやHTMLエディターを使用している場合は、@font-faceキットのzipフォルダーの内容をメインWebサイトフォルダーにコピーし、次のコード例を参考にしてページでフォントを使用します。

    最初に、フォントにリンクする必要があります。Font Squirrelの@font-faceキットには、フォントタイプのコレクションが含まれているため、これらのフォントのいずれかにリンクするときには、ヘッダー内のコードにすべてのフォントタイプを含める必要があります。つまり、次のサンプルのようになっている必要があります(当然ですが、「Chantelli Antiqua」という名前を、ダウンロードしたフォントの名前に置き換える必要があります。Font Squirrelおよびフォントフォルダーのファイル名に表示されている名前を正確にコピーしていることを確認してください)。

    }

    ページのヘッダーまたはヘッダーにリンクされたスタイルシートでフォントがリンクされると、次のクラススタイルのように、スタイルでフォントを使用できます。

    .sectionName {

    font-family: 'Chantelli Antiqua', Georgia, Times, serif;

    font-weight: 400;

    font-size: 150%;

    color: #603;

    }

    最後に、スタイルを使ってページ内のテキストを書式設定します。

    <p class="sectionName">Section 1</p>

  3. Dreamweaver CS6を使用している場合は、Dreamweaverで自動的にほとんどの作業を行うことができます。まず、Modify(変更)/Web Fonts(Web フォント)を選択し、新しいWebフォントマネージャーで、ダウンロードしたフォントをDreamweaverに読み込みます。
  4. Web Font Manager(Web フォントマネージャー)ダイアログボックスで、「Add Font(フォントの追加)」ボタンをクリックしてAdd Web Font(Web フォントを追加)ダイアログボックスを開きます(図10を参照)。
  1. Add Web Font(Web フォントを追加)ダイアログボックスで、「EOT Font」フィールドの右側にあるファイルフォルダーの形をした小さいアイコン(Dreamweaverで参照アイコンとして汎用的に使用されている。図10にも表示されている)をクリックします。
  2. ハードディスクドライブで、Font Squirrelからダウンロードした@font-faceキットフォルダーの展開されたバージョンに移動し、フォルダーを開き、フォントのEOTバージョンをクリックして選択し、「Open(開く)」をクリックします。EOTバージョンを選択すると、Dreamweaverで自動的に4つのバージョンのフォントがAdd Web Font(Web フォントを追加)ダイアログボックスに読み込まれます(とても便利ですね)。
  3. 「OK」をクリックして、保存してAdd Web Font(Web フォントを追加)ダイアログボックスを閉じ、「Done(完了)」をクリックして、保存してWeb Fonts Managerダイアログボックスを閉じます。
  4. Web Fonts Manager(Web フォントマネージャー)ダイアログボックスにWebフォントを読み込むと、DreamweaverのCSS Rule definition(CSS ルール定義)ダイアログボックスの「Font-Family」リストで選択できるようになります(図11を参照)。
  1. Webフォントを使用するスタイルを作成すると、Dreamweaverのスタイル機能を使用して、そのスタイルをDreamweaverの他のスタイルと同様に適用できます。

重要:Dreamweaverのデザイン領域でWebフォントを表示するには、ワークスペースの上部にある「ライブビュー」ボタンをクリックする必要があります(図12を参照)。

  1. 最後に、Font Squirrel(またはその他の同様のサービス)の@font-faceキットを使用する場合は、WebファイルおよびCSSをアップロードするときにフォントをアップロードする必要があることを忘れないでください。Webフォントマネージャーを使用する場合、Dreamweaverによって自動的にLocal Siteフォルダー内にWebFontsフォルダーが作成され、すべてのフォントタイプがそのサブフォルダーにコピーされます。フォントがWebサイトで表示されるように、WebFontsフォルダーとそのすべての内容をアップロードしてください。

Dreamweaverの新しいWebフォントマネージャーは、DreamweaverのスタイルでWebフォントを簡単に使用できるようにする便利な機能ですが、新しいWebフォントマネージャーはフォントがローカルコンピューター上にある場合にのみ使用できることに注意してください。このチュートリアルで前に説明したGoogle Web Fontsなどのフォントサービスや、次に説明するTypekitを使用する場合、Webフォントマネージャーは使用できません。

Typekitによる本格的な処理

Typekitについてこの記事の最後で説明するのは、現在アドビがTypekitを買収したからではなく、筆者が本当にこれが最善であり、楽しみは最後に取っておく方がよいと考えたからです。業界屈指のTypekitは幅広いプロフェッショナル品質のフォントを提供しており、アドビがTypekitを買収したことにより、Adobe Creative Suiteとの統合がますます進んでいくことが期待されています。

実際、Typekitは既にAdobe Creative Cloudのすべてのサブスクリプションに含まれています。Creative Cloudサブスクリプションのメンバーでなくても、Typekitを無料で試すことはできますが、トラフィックの量が多い場合や、複数のWebサイトでフォントを使用したい場合は、月額のサブスクリプション料金を支払う必要があります。

Typekitの仕組みについて説明する前に、これまでにこのチュートリアルで説明した内容を簡単に振り返ってみます。GoogleとFont Squirrelは、@font-faceルールを使用してWebフォントを操作するための2つの大きく異なる方法を提示しています。

  1. 使用しているコンピューターにフォントをダウンロードし、Webページをパブリッシュするときに、自分のWebサーバーでそのフォントをホストします(これはFont Squirrelのモデルです)。
  2. 第三者のサーバーでホストされているフォントにリンクします(これはGoogle Web Fontsのモデルです)。

ここでは、Typekitのフォントを使用する方法を説明しながら、第3のアプローチを紹介します。

  1. Adobe Typekitでは、typekit.com Webサイトでアカウントを設定し、Webサイトで使用したいフォントのコレクションを作成します。次に、スタイルでそれらのフォントを使用し、typekit.comアカウントで指定されたURLにWebページをパブリッシュすると、Typekitのフォントが自動的に(まるで魔法のように)Webページに表示されます。

Typekitの仕組みを順を追って示すと、次のようになります。

  1. typekit.comでアカウントを設定します(図13を参照)。
  1. Font Libraryを参照するか、特定のフォントを検索します。参照するときにお気に入りのフォントのリストを設定することもできます(図14を参照)。
  1. 使用したいフォントが見つかったら、フォントアイコンの下部にある緑のバーをクリックし、「Add to Kit(キットに追加)」を選択します(図15を参照)。
  1. TypekitでKitにフォントを追加するときには、利用できるようにするウェイトとスタイルの選択など、いくつかの手順が必要です。これらのすべてのオプション(時間がたつと変更される可能性がある)を説明する代わりに、Typekitエディターの手順を注意深く読んで(従って)ください。

    重要:選択するフォントスタイルオプションが多くなるほど、Typekitサーバー上でアクセスする必要があるフォントスタイルも増加し、WebブラウザーでのWebページのダウンロードも遅くなります。

  2. Typekitエディターで必要なすべてのオプションを指定した後、右下隅にある大きい緑の「Publish」ボタンをクリックします(図16を参照)。Typekitフォントは、WebページをパブリッシュするまでWebページに表示されません。
  1. 最後に、Typekit Webサイトから小さいJavaScriptをコピーして、WebサイトのTypekitフォントを使用したいページの先頭に挿入する必要があります。Typekitサイトで埋め込むコードを見つけるには、「Launch Kit Editor(キットエディターを起動)」ボタンをクリックします(図17の右上隅に表示される緑のボタン)。Typekitエディターで、「Embed Code(埋め込みコード)」リンクをクリックして、JavaScriptコードを示すウィンドウを開きます。
  2. 自分のWebサイトのコードで、Typekitからコピーした埋め込みコードを、Webページのコードの先頭にある開く<head>タグと閉じる</head>タグの間にペーストします。Typekitでは、最適な結果を得るために、このコードをhead領域の先頭に挿入することを推奨しています。

    注意:Typekitモデルは他の2つとは大きく異なるので、この3つのサイトの仕組みを比較できるように、簡単にまとめてみます。Font Squirrelでは、フォントを自分のコンピューターにダウンロードし、サーバーにパブリッシュします。Google Web Fontsでは、Googleサーバー上でホストされているフォントにリンクします。Typekitでは、基本的に、小さなJavaScriptを使用して自分のサイトとTypekitサイトの間に接続を作成すると、Typekit上のコレクションに含まれるフォントがWebサイト上のページで使用できるようになります。

  3. TypekitでWebサイトを設定し、Font Kitを設定し、必要なフォントをTypekitでパブリッシュし、埋め込みコードをWebページにコピーしたら、準備は完了です。Typekitでキットに含まれるすべてのフォントが自動的に使用できるようになります。フォントを使用するには、Font Kitにあるフォントの名前をスタイルに含めるだけです。

Typekitを最大限に活用するための最後のいくつかのヒント:

  • スタイル定義のフォント名を、Typekitで表示されるとおり、正確に入力していることを確認します。
  • フォントはTypekitで含められたURLでのみ表示されることを忘れないでください。つまり、これらのフォントがURLで表示されるようにするには、ページをWebにパブリッシュする必要があります。ローカルコンピューターでTypekitフォントをプレビューしたい場合は、キットを設定するときにURLの1つとしてlocalhostを指定することができ、これにより、WebサイトのURLと同様に、ローカルコンピューターでもフォントが表示されます。
  • Typekitには異なるレベルのサービスがあります。複数のWebサイトを管理する場合は、各サイトのFont Kitを個別に設定する必要があります。最大で2つのサイトを無料で管理でき、有料アカウントを使用する場合は、1つのログインで複数のWebサイトを管理できます。
  • Typekitの膨大なフォントのコレクションでも十分ではない場合は、ライセンスを受けてパートナーのフォントも使用できます(図18を参照)。

次のステップ

@font-faceルールの仕組み、Web上のフォントの進化およびフォントの表示方法について詳しくは、Typekitの創始者であるGreg Veenの「Introduction to web typography and @font-face」(Webタイポグラフィと@font-faceの概要)を参照してください。