CSS セレクターは web ブラウザーに対して、テキストに使用するフォントの太さやスタイルを指示するだけでなく、使用している web フォントをどこに適用するかを指示します。
CSS での font-family 名の使用
Web プロジェクトページには、プロジェクト内の各フォントの CSS font-family 名に加え、各フォントの太さとフォントスタイルを示す数値が表示されます。 「プロジェクトを編集」をクリックすると、各プロジェクトの CSS の詳細が表示されます。
ドキュメントに埋め込みコードを追加した後は、これらの font-family 名を CSS 内で使用して、テキストにフォントを適用します。 例えば、次のように指定します。
フォールバックフォントの指定
ユーザーのブラウザーで web フォントがサポートされていない場合や、何らかの理由で web フォントを読み込めない場合は、CSS スタックのフォールバックフォントが代わりに使用されます。
フォントスタックには、複数のプラットフォームで一様に使用可能な 1 つ以上のフォールバックフォント（Georgia、Arial など）と、それに続く汎用的な font-family 名（serif、sans-serif など）を含める必要があります。 最初のフォントがブラウザーで見つからない場合は、2 番目のフォントが使用されます。以降も同様です。
複数の太さとスタイルの使用
CSS で数値の font-weight 値を使用すると、「normal」や「bold」以外の太さを指定できます。 よく使用される数値とそれに対応する太さを次に示します。
- 100 = thin
- 200 = extra-light
- 300 = light
- 400 = normal, book
- 500 = medium
- 600 = demi-bold
- 700 = bold
- 800 = heavy
- 900 = black
web プロジェクトページでは、プロジェクトに含まれるすべてのフォントの数値を確認できます。
例えば、h1 要素にフォントの太さ 700 を適用するには、次の CSS を使用します。
Internet Explorer 8 でのバリエーション固有の名前の使用
Internet Explorer 8 で読み込まれる太さは、1 つのファミリーにつき最大で 4 つです。また、密接に関連する 2 つの太さ（例えば、600 と 700）を使用すると、1 つの太さしか正しく読み込まれない場合があります。 Adobe Fonts では、この 2 つのバグに対処するために、このバージョンのブラウザーに対してバリエーション固有の font-family 名を提供します。
バリエーション固有の名前は、必要に応じて font-family スタックの先頭（メインのファミリー名の前）に追加してください。
この名前は、通常の font-family 名と、それに続くダッシュおよびフォントバリエーション記述（FVD）で構成されます。 例えば、太さ 700 のフォントを含む brandon-grotesque のバリエーション固有の名前は brandon-grotesque-n7 になります。
バリエーション固有の名前はこの問題が発生しないブラウザーでは定義されないので、それらのブラウザーではスタック内の 2 番目にある完全なファミリー名が使用されます。
ほとんどのユーザーは、このような追加の font-family 名を使用する必要はありません。 具体的には、Internet Explorer 8 でフォントが適切に表示されない問題が発生する場合にのみ、この名前を追加する必要があります。
