ウェブサイトに来ると、イメージは愛の多くを得るが、それは検索エンジンに訴える書かれた言葉であり、ほとんどのサイトのコンテンツを運ぶ。 そのため、タイポグラフィーデザインはウェブサイトデザインの非常に重要な部分です。 サイトのテキストの重要性は、見た目が良く見えるようにする必要があります。 これは、CSS（Cascading Style Sheets）スタイリングで行われます。
現代のWebデザイン標準に従って、Webサイトのテキストコンテンツの外観を指定する場合は、CSSを使用します。 これは、そのCSSスタイルとページのHTML構造を分離します。 たとえば、ページのフォントを「Arial」に設定する場合は、CSSに次のスタイルルールを追加します（注：これは外部CSSスタイルシートで行われることに注意してください）ウェブサイトのすべてのページについて）
本文{font-family：Arial; }このフォントは "body"に設定されているので、CSSカスケードはページの他のすべての要素にスタイルを適用します。 これは、他のすべてのHTML要素が "body"要素の子であるため、フォントファミリや色などのCSSスタイルが親要素から子要素にカスケードされるためです。 これは、特定の要素に対してより具体的なスタイルが追加されない限り、そうなります。 このCSSの唯一の問題は、1つのフォントしか指定されていないことです。 何らかの理由でそのフォントを見つけることができない場合、ブラウザは代わりにそのフォントを置き換えます。 これは悪いです。なぜなら、あなたはどんなフォントが使われているかを制御できないからです。ブラウザがあなたのために選ぶでしょう。 それはフォントスタックが入る場所です。
フォントスタックは、CSSフォントファミリ宣言のフォントのリストです。 フォントは、フォントが読み込まれていないなどの問題が発生した場合に、サイトに表示することを好みの順番で表示されます。 フォントスタックを使用すると、デザイナは、コンピュータに呼び出された最初のフォントがない場合でも、Webページ上のフォントの外観を制御できます。
では、フォントスタックはどのように見えますか？ 次に例を示します。
body {font-family：ジョージア州、 "Times New Roman"、serif; }ここに注意するべきことがいくつかあります。
最初に、異なるフォント名をカンマで区切っていることがわかります。 それぞれの間にカンマで区切られていれば、好きなだけ多くのフォントを追加できます。 ブラウザは最初に指定された最初のフォントを読み込もうとします。 それが失敗すると、使用できるフォントが見つかるまで各フォントを試している行を実行します。 この例では、Webセーフフォントを使用しています。サイトにアクセスしている人のコンピュータで「Georgia」が見つかる可能性があります（注 - ブラウザはページ上に指定されたフォントをブラウザ上で検索します。あなたのシステムからロードするフォント。 何らかの理由でフォントが見つからなかった場合は、スタックの下に移動し、指定された次のフォントを試します。
その次のフォントに関しては、スタックにどのように書き込まれているのか注意してください。 "Times New Roman"の名前は、二重引用符で囲まれています。 これは、フォント名に複数の単語が含まれているためです。 複数の単語を含むフォント名（Trebuchet MS、Courier Newなど）は、二重引用符で囲まれた名前を持つ必要があります。そのため、ブラウザはこれらの単語のすべてが1つのフォント名の一部であることを認識します。
最後に、一般的なフォント分類である "serif"でフォントスタックを終了します。 万一、スタックに名前を付けたフォントが利用できない場合は、ブラウザは選択した適切な分類に少なくとも該当するフォントを探します。 例えば、ArialやVerdanaのようなsans-serifフォントを使用している場合、 "sans-serif"の分類でフォントスタックを終了するよりも、読み込みに問題がある場合は少なくともフォント全体をそのファミリに保持することになります。 確かに、ブラウザがスタックにリストされているフォントのどれも見つけることができず、代わりにこの一般的な分類を使用しなければならないことは非常にまれですが、とにかく二重に安全であるように含めることがベストプラクティスです。
フォントスタックとWebフォント
今日、多くのウェブサイトは、他のリソース（サイトの画像、Javascriptファイルなど）と共にGoogleフォントやTypekitなどのオフサイトフォントの場所にリンクされているウェブフォントを使用しています。 これらのフォントはファイル自体にリンクしているので読み込む必要がありますが、フォントスタックを使用して、発生する可能性のある問題を何らかの方法で制御できるようにします。 Arial、Verdana、Georgia、Times New Romanなど、この記事で例として使用しているフォントはすべて、Webセーフフォントでなければならないことに注意してください人のコンピュータ上で）。 欠落しているフォントの可能性は非常に低いですが、フォントスタックを指定することは、サイトの印刷デザインを可能な限り防御するのに役立ちます。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：8/9/17