CSSでカスタムフォントをロードして使用する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
ウェブサイトの視覚的アイデンティティは、主に色と書体という2つのデザイン原則によって決定されます。 過去10年間で、デバイスにプリロードされたフォントをユーザーに提供すること、@font-faceルールを使用してカスタムフォントをロードする機能、およびフォントホスティングサービスの使用において大きな進歩がありました。 Webブラウザーは、可変フォントのサポートも実装しています。これは、複数のフォントを補間できる単一のフォントファイルであり、高度な調整とフォントのカスタマイズを提供します。
このチュートリアルでは、Webサイトにフォントをロードする例を試してみます。 ユーザーのデバイスにインストールされている可能性のあるフォントを使用するには、フォントスタックを使用します。これは、可用性に基づくフォントのランク付けです。 次に、フォントホスティングサービス Google Fonts を使用して、カスタムフォントを検索、選択、およびページにロードします。 最後に、@font-faceルールを使用して自己ホスト型フォントファミリをロードし、続いて自己ホスト型可変フォントをロードします。
前提条件
- カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
- タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
- CSSのフォントスタックとフォントプロパティの理解。これは、チュートリアル CSS でフォント、サイズ、および色を使用してテキスト要素のスタイルを設定する方法にあります。
- ローカルマシンに
index.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用してWebサイトを構築する方法全体を試してください。
HTMLの設定と初期フォントスタックの作成
フォントスタックの概念は、大多数のコンピューターにインストールできる信頼できるフォントがほんのわずかしかなかったWebの初期に由来します。 多くの場合、フォントが使用できない可能性が高いため、フォントスタックは、ブラウザが検索してロードしようとするフォントの順序を提供していました。 このセクションでは、復元力のあるフォントスタックの原理と、最新のデバイスでフォントに使用できるオプションについて学習します。 ただし、最初に、フォントを示すためのサンプルHTMLを作成します。
テキストエディタでindex.htmlを開くことから始めます。 次に、次のHTMLをファイルに追加します。
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
<head>タグ内で、最初の<meta>タグがHTMLファイルの文字セットを定義します。 2番目の<meta>タグは、モバイルデバイスがページをレンダリングする方法を定義します。 次に、<title>タグでページにタイトルを付けます。 最後に、<link>タグは、後でページのスタイルを作成するために使用するCSSファイルを参照します。
次に、<body>タグ内に、ページのコンテンツを追加します。 このコンテンツは、 Cupcake Ipsum のフィラーコンテンツと呼ばれ、実際には何も言わずにコンテンツのように見えるテキストを提供します。 フィラーの内容は、次のコードブロックで強調表示されています。 コードが追加および変更されると、チュートリアル全体でこの強調表示方法に遭遇します。
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<main>
<header>
<div class="content-width">
<h1>Sweet strawberry cheesecake</h1>
<p><em>Sweet muffin bear claw</em> donut chupa chups liquorice tiramisu candy canes sweet.</p>
</div>
</header>
<div class="content-width">
<p>Chocolate shortbread caramels tootsie roll tiramisu sweet dessert apple pie fruitcake. <strong>Croissant icing chupa chups</strong> sweet roll cake tart fruitcake soufflé jujubes. Shortbread brownie tootsie roll ice cream pudding dessert marshmallow sesame snaps. Cake pie jujubes lemon drops sesame snaps soufflé cookie jujubes wafer. Caramels ice cream fruitcake pastry cheesecake chocolate tootsie roll cake marshmallow. Pie candy canes cupcake dragée bonbon fruitcake marzipan. Tootsie roll halvah bonbon cake muffin gummies. Bonbon cotton candy marzipan cake sesame snaps chupa chups donut dessert. Macaroon gummies macaroon biscuit chocolate carrot cake gummi bears.</p>
<h2>Donut candy canes cotton candy</h2>
<p><strong><em>Liquorice gingerbread tiramisu</em></strong> pie bonbon soufflé. Jujubes tootsie roll muffin gingerbread powder. Carrot cake halvah chocolate bar tart sugar plum sugar plum pastry. Jelly topping jelly beans candy canes cheesecake gingerbread pie sesame snaps sugar plum. Pie cheesecake pudding jelly brownie jelly beans halvah. Ice cream powder carrot cake bear claw cake cheesecake.</p>
<p><em>Jelly-o jelly-o jelly</em> lollipop croissant. Carrot cake tart danish macaroon dragée gingerbread. Sugar plum cotton candy biscuit <strong>fruitcake powder liquorice</strong>. Shortbread candy pie tart pudding. Sesame snaps bear claw tart tiramisu donut chocolate cake. Cheesecake tiramisu chocolate cake dessert dessert candy candy canes apple pie marshmallow. Sweet croissant pudding toffee tootsie roll gummies tart pastry pie. Candy apple pie cake wafer tootsie roll tart icing halvah.</p>
<h3>Gingerbread gummi bears</h3>
<p><em>Tiramisu sweet pastry</em> danish topping ice cream caramels. Tiramisu candy liquorice jelly-o marzipan candy canes cupcake topping. Gummi bears jujubes carrot cake shortbread sesame snaps marshmallow danish pudding cotton candy. <strong>Cake jujubes biscuit</strong> topping marzipan sweet roll apple pie bonbon. Bear claw donut bear claw bonbon caramels halvah gummi bears. Gummi bears apple pie jelly-o donut sesame snaps icing marzipan.</p>
<p><strong><em>Bonbon chupa chups</em></strong> donut dessert pudding. Sweet roll caramels dessert muffin croissant. Powder chocolate lollipop ice cream bonbon pie candy muffin cotton candy. Fruitcake topping chupa chups toffee jelly-o halvah. Candy soufflé toffee gummies fruitcake oat cake chocolate cake. Dessert cupcake cheesecake sweet roll bear claw. Marshmallow halvah bear claw biscuit dragée marzipan lemon drops jelly.</p>
</div>
</main>
</body>
</html>
フィラーコンテンツには、さまざまなフォントスタイルを提供するために使用されるいくつかの要素が含まれています。 <strong>タグはデフォルトでコンテンツを太字にし、<em>タグはコンテンツを斜体にし、見出しタグはフォントサイズを大きくしてコンテンツを太字にします。
次に、テキストエディタに戻り、styles.cssファイルをindex.htmlと同じフォルダに作成します。 これは、index.htmlの<head>要素で参照したファイルです。 styles.cssファイルに、次のコードを追加します。
styles.css
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
}
.content-width {
max-width: 70ch;
width: calc(100% - 4rem);
margin: 0 auto;
}
main {
margin-bottom: 4rem;
}
header {
margin-bottom: 4rem;
padding: 2rem 0;
background-color: hsl(280, 50%, 40%);
border-bottom: 4px solid hsl(300, 50%, 50%);
color: hsl(300, 50%, 90%);
}
header p {
color: hsl(300, 50%, 85%);
}
h1, h2, h3 {
margin: 0;
line-height: 1.25;
}
h2, h3 {
color: hsl(280, 50%, 40%)
}
これらのスタイルは、ページの全体的な視覚スタイルを作成します。 headerの背景は紫色で、内部のh1とpは薄紫色です。 mainおよび.content-widthセレクターはページのレイアウトを作成し、bodyおよび見出しセレクターは、line-height、color、およびmarginの値。
変更内容をstyles.cssに保存し、Webブラウザを開きます。 ファイルをブラウザウィンドウにドラッグするか、ブラウザのファイルを開くオプションを使用して、ブラウザでindex.htmlを開きます。 ブラウザはHTMLおよびCSSコードをレンダリングして、次の画像のようなページを生成します。
ブラウザのindex.htmlファイルのテキストは、ブラウザのローカルデフォルトフォントを使用します。 ほとんどの場合、これは Times NewRomanのようなセリフフォントになります。 フォントをカスタマイズする最もパフォーマンスの高い方法は、エンドユーザーのコンピューターに既にあるフォントを使用することです。 ローカルフォントを使用すると、ブラウザはサイズの大きいファイルをダウンロードして処理する必要がなくなります。
今日では、多くの場合、数十のローカルフォントから選択できます。 これらはシステムフォントとして知られています。 MicrosoftとAppleはどちらも、システムに付属しているフォントの最新リストを保持しています。
プリインストールされているシステムフォントの使用を開始するには、テキストエディタでstyles.cssに戻ります。 bodyセレクターで、font-familyプロパティを追加し、その値をフォントスタックと呼ばれるフォントのコンマ区切りリストにします。
styles.css
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "PT Sans", Calibri, Tahoma, sans-serif;
}
...
ブラウザは、成功するまで、フォントスタックにローカルフォントを順番にロードしようとします。 このフォントスタックの場合、最初に試行されるフォントは"PT Sans"です。これは、複数単語のフォント名であるため、引用符で囲まれています。 PT Sansは、 ParaType のフォントで、Appleオペレーティングシステムにプリインストールされており、 GoogleFontsから無料で入手できます。 次のフォントはCalibriで、その後に別のコンマとTahomaが続きます。 Calibri は、最近のバージョンのWindowsにインストールされているMicrosoftのフォントであり、 Tahoma は、Appleオペレーティングシステムに10年以上存在しているMicrosoftの別のフォントです。
最終的なフォントは、一般的な名前間隔の値sans-serifです。 前の3つのフォントのいずれも使用できない場合、ブラウザはHelveticaやArialなどのブラウザのデフォルトのsans-serifフォントを使用します。
変更内容をstyles.cssに保存してから、ブラウザでindex.htmlを更新してください。 オペレーティングシステムとインストールされているフォントによって、レンダリングされるフォントとそのレンダリング方法が決まります。 次の画像は、macOSのFirefoxにロードされたときにPTSansがフォントとしてどのように表示されるかを示しています。
フォントファミリーは、特定のフォントのすべての太さとスタイルのバリエーションで構成されています。 ファミリには、フォントの表示の細さ、太さ、傾斜の程度を変更する多くの追加の太さやスタイルを含めることができます。
font-styleプロパティは、フォントの傾きを決定します。 値は最も一般的にはitalicです。 ただし、一部のフォントはoblique値をサポートしています。これは、傾斜の急勾配を示すオプションの次数値を受け入れます。
font-weightプロパティには、normalとboldの2つの定義済み名前付き値がありますが、この値を決定するための最も用途が広く予測可能な方法は、重み番号を使用することです。 ウェイト番号の値は通常、100から900まで100の増分で定義され、100は薄いウェイト、900は厚いウェイトです。 ブラウザが指定された太さに対応するフォントを見つけられない場合、ブラウザは利用可能な最も近いサイズを見つけます。
チュートリアル全体でこのページの新しいベースフォントスタイルを設定するには、テキストエディタでstyles.cssに戻ります。 次に、h1、h2、h3、およびp要素ごとに要素セレクターを作成します。 各セレクター内に、次のコードブロックから強調表示されたCSSを追加して、フォントサイズを大きくし、見出しを強調します。
styles.css
...
h2, h3 {
color: hsl(280, 50%, 40%)
}
h1 {
font-size: 3rem;
font-weight: 100;
}
h2 {
font-size: 2rem;
font-weight: 200;
}
h3 {
font-size: 1.75rem;
font-style: italic;
font-weight: 200;
}
p {
font-size: 1.125rem;
}
ここでのh1は、3remのfont-sizeに設定されます。これは、48pxと同等で、100。 次に、h2を2remに設定します。これは、32pxと同等であり、font-weightは200です。 次に、h3はfont-weightに設定され、h2と少し小さいfont-sizeに設定されますが、font-styleプロパティが追加されます。 italicに設定します。 最後に、pエレメントセレクターは、標準のfont-sizeを1.125remにバンプします。これは、この場合は18pxと同じです。 このテキストの全体的なスタイルの調整は、各セクションで使用されているフォントを変更しても同じです。
変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新してください。 全体的なテキストサイズが大きくなり、見出しのスタイルが互いに区別されるようになりました。 次の画像は、これがブラウザにどのように表示されるかを示しています。
このセクションでは、フォントスタックを使用して、ランク付けされた順序でページに一連の可能なフォントをロードしました。 また、font-weightおよびfont-styleプロパティを持つフォントファミリの可能なバリエーションについても学びました。 次のセクションでは、フォントホスティングサービスのフォントを使用します。
ホストされたサービスからのフォントファイルの検索とロード
ホスト型フォントサービスは、カスタムフォントを検索してWebサイトに提供するための一般的で効果的な方法です。 Google Fonts 、 Adobe Fonts （以前のTypekit）、 Typography.com などのサービスは、クライアントが一時的にダウンロードする高品質フォントの大規模なライブラリを提供しますページを表示するとき。 これは、クライアントのシステムにどのフォントがあるかを心配する必要がなくなったことを意味します。
各フォントホスティングサービスには、フォントをロードするための独自のプロセスがあり、多くの場合、関連するコストがあります。 このセクションでは、オープンソースおよび限定ライセンスのフォントを無料でホストしているため、Googleのサービスからフォントを見つけてロードします。
まず、fonts.google.comを開きます。 ページ上部の検索バーを使用して、「OpenSans」という名前のフォントを検索します。 検索結果には、一致する用語が一覧表示されます。これは、 Google FontsOpenSansページへのリンクです。 このページには、いくつかのフォントスタイルのリストがあります。 これらのフォントの太さとスタイルの組み合わせはそれぞれ、ブラウザがダウンロードする一意のフォントファイルです。
注：各font-weightおよびfont-styleは、すべてを選択するのではなく、必要に応じて選択する必要があります。 選択するフォントが多いほど、ダウンロードする必要のあるフォントが増えるため、Webサイトの読み込み時間が長くなります。 デザインで使用されているフォントの太さとスタイルのみをロードすることが重要です。
このデザインでは、 Light 300 、 Light 300 italic 、 Regular 400 、 Regular 400 italic 、 Bold700を選択します。 ]、および太字の700イタリック。 次の画像は、この選択がGoogleFontsでどのように表示されるかを示しています。
次に、GoogleFontsサービスからファイルを読み込むために必要な<link>タグをコピーします。 これを行うには、' の代わりにオプション @輸入' GoogleFontsインターフェースでファイルをロードする方法としてのオプション。 提示された一連の<link>タグをコピーします。 次に、テキストエディタでindex.htmlに戻ります。 <head>要素の内部に入り、<link>タグがstyles.cssを読み込んだ後、GoogleFontsから<link>タグを貼り付けます。 次のコードブロックで強調表示されているHTMLは、コピーされたコードを追加する場所を示しています。
index.html
<!doctype html>
<html>
<head>
...
<link href="styles.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
...
</body>
</html>
最初の2つの<link>要素は、 preconnect と呼ばれるタスクを実行します。これは、外部Web接続を優先するようにブラウザーに指示します。 次に、これら2つの<link>要素は、3番目の<link>からCSSファイルとフォントファイルをできるだけ早くロードするようにブラウザーを準備します。
ブラウザがフォントをページにロードする準備ができたので、次にフォントスタイルを適用して、テキストがそのフォントでレンダリングされるようにする必要があります。
変更内容をindex.htmlに保存し、テキストエディタでstyles.cssに戻ります。 bodyセレクターで、font-familyプロパティに移動します。 "PT Sans"フォントの前に、フォント名"Open Sans"を引用符で囲み、その後にコンマを付けて値を付加します。 次のコードブロックで強調表示されているCSSは、新しいフォントがフォントスタックのどこに配置されているかを示しています。
styles.css
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "Open Sans", "PT Sans", Calibri, Tahoma, sans-serif;
}
...
フォントスタックの先頭にOpenSansを追加すると、ブラウザがGoogleからファイルを読み込めない場合に、ブラウザは次に使用可能なローカルフォントにフォールバックします。 常に少なくとも2つのフォントスタックを用意することが重要です。スタック内の最後のフォントは、sans-serif、serif、monospace、または最も効果的な別の名前付き値です。目的のフォントに似ています。
変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 ページ上のテキストは、GoogleFontsからロードされたOpenSansフォントを使用してレンダリングされます。 font-weightが100および200に設定されているテキストは、代わりに300を使用します。 次の画像は、これがブラウザにどのように表示されるかを示しています。
このセクションでは、GoogleFontsからフォントファミリーをロードしました。 各フォントの太さとスタイルがサービスから読み込まれる異なるファイルであり、読み込まれるバリエーションの数がサイトのパフォーマンスに影響を与える可能性があることを学びました。 次のセクションでは、独自の@font-faceルールを記述してフォントをロードし、セルフホストフォントファイルを作成します。
@font-faceを使用したセルフホストフォントの読み込み
セルフホストフォントは、HTMLファイルやCSSファイルなどの他のWebコンポーネントと一緒にサーバーに保存されるフォントファイルです。 フォントファイルのセルフホスティングを検討する一般的な理由は、ホスティングサービスによって提供されていないフォントを使用する場合です。 セルフホスティングの場合、フォントの相互関係とフォントの名前をより細かく制御できます。これは、@font-faceルールの定義を介して設定できます。 このセクションでは、独自の@font-faceルールを作成し、フォントのファミリーをWebページにロードします。
このセクションでは、オープンソースフォントを含むサンプルzipファイルをダウンロードする必要があります。 これはブラウザからダウンロードするか、次のcurlコマンドを使用できます。
curl -sL https://assets.digitalocean.com/articles/68060/fonts.zip -o fonts.zip
ファイルをダウンロードしたら、zipファイルに含まれているfontsディレクトリを抽出し、コンピュータのindex.htmlおよびstyles.cssファイルと同じディレクトリに配置します。 Linuxでは、次のunzipコマンドを使用して、コマンドラインからこれを実行できます。
unzip fonts.zip
次に、テキストエディタでindex.htmlを開きます。 zipファイルからローカルフォントをロードするので、Googleフォントコードを削除できます。 このセクションでは、既存のstyles.cssファイルからフォントファイルをロードします。 <head>要素の内容が、次のコードブロックのように設定されていることを確認してください。
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Demo Font Family Page</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
...
</body>
</html>
編集内容をindex.htmlに保存し、テキストエディタでstyles.cssを開きます。
@font-faceルールを使用して、Webページにカスタムフォントをロードできます。 カスタムフォントの読み込みの歴史は、最も多くのブラウザをサポートするための複合的な方法につながりました。 @mediaや@supportsなどの他のatルールとは異なり、@font-faceルールには追加の引数はありません。 ルールブロック内では、設定された数のプロパティのみが受け入れられます。 最も重要なのはfont-familyです。これは、ブラウザが適切なフォントファイルを参照およびロードするために使用する名前を表します。 次に、srcプロパティはフォントファイルの場所を参照します。 バージョン9より前のバージョンのInternetExplorer をサポートするには、2つのsrcプロパティが必要です。最初のプロパティは、.eotフォントファイル形式のみを参照します。 2番目のsrcプロパティは、フォントファイル形式のコンマ区切りのリストになります。 ブラウザのバージョンは、サポートする適切な形式を選択します。
@font-faceルールの使用を開始するには、テキストエディタでstyles.cssを開きます。 ファイルの先頭で、bodyセレクターの前に、次の@font-faceルールを作成します。
styles.css
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
}
body {
...
}
...
このルール内に、値が"Fira Sans"のfont-familyプロパティを引用符で囲んで追加しました。 このコードは全体的なfont-familyを定義しているため、1つのフォント名のみを使用する必要があります。 srcのフォント形式のコンマ区切りリストは2つに分かれています。 1つ目はurl()で、background-imageプロパティと同様に、サーバー上のファイル形式へのパスを提供します。 次に、format()は、参照されているファイルのタイプを説明し、ブラウザーがサポートされている形式を選択できるようにします。
fontsフォルダー内のfiraフォルダーには、FiraSansフォントの特定のファイル形式の4つのフォルダーが含まれています。 EOT は、Encapsulated OpenTypeの略で、MicrosoftがInternetExplorer用にカスタムフォントをロードするために開発した形式です。 TTFはTrueTypeFontの略で、元々Web用に開発されたものではない古いフォント形式です。 WOFFおよびWOFF2形式は、Web Open Font Formatの略で、「2」は形式の2番目のバージョンを示します。 最新のブラウザの大部分は、TTF、WOFF、およびWOFF2を同等にサポートしています。 最も可能なブラウザ形式をカバーする@font-faceルールを作成するために、フォントに複数のソースを提供しました。 EOTは、srcプロパティの両方で参照されます。これは、バージョン9以降のInternetExplorerでは代わりにコンマ区切り形式が使用されているためです。
FiraSansの@font-faceルールが作成されたので、bodyセレクターのfont-familyプロパティに移動します。 font-familyの値で、"Open Sans"を"Fira Sans"に置き換えて、ページでセルフホストフォントを使用します。 次のコードブロックの強調表示された部分は、この変更を示しています。
styles.css
@font-face {
...
}
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: "Fira Sans", "PT Sans", Calibri, Tahoma, sans-serif;
}
...
フォントはstyles.cssおよびindex.htmlファイルと同じ場所からロードされていますが、代替フォントのスタックを保持することが重要です。 セルフホストフォントが読み込まれない理由は不明です。ブラウザで問題が発生した場合は、十分なバックアップをとることで、サイトの美観を維持できます。
変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 フォントの太字と斜体のバージョンが正しく表示されないことに注意してください。 これは、@font-faceルールでは、通常のフォントの太さとスタイルファイルのみが読み込まれて使用されたためです。 ブラウザが太字または斜体のスタイルをフォントに適用する必要があるが、適切なフォントファイルがない場合、ブラウザは必要なバリエーションを作成します。 この変更されたフォントの形式は、フェイクボールドおよびフェイクイタリックとして知られています。 フェイクボールドは、フォントにストロークを追加することで作成されます。これにより、意図したレイアウトに干渉する可能性のある文字間の間隔が広くなることがよくあります。 偽のイタリックは、フォントを斜めにすることで作成されます。フォントは、実際のイタリックのようにスペースを使用しないことがよくあります。
次の画像は、偽の太字、斜体、および太字の斜体スタイルがブラウザにどのように表示されるかを示しています。
ブラウザにフォントファミリの適切なバリエーションを提供するには、@font-faceルールで詳細を提供する必要があり、追加のバリエーションファイルをロードするためのルールをさらに作成する必要があります。
テキストエディタでstyles.cssに戻ります。 @font-faceルールで、2番目のsrcプロパティの後にfont-weightプロパティとfont-styleプロパティを追加します。
styles.css
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
...
ここでは、両方のプロパティの値をnormalに設定します。 font-weightの場合、normalの値は、400の数値の重み値と同等です。 これらのプロパティは、通常のバリエーションにこれらのフォントファイルを適用するようにブラウザに指示します。 したがって、FiraSans-Regularフォントファイルは、テキストを通常の太さとスタイルにする必要がある場合に使用されます。
次に、フェイクボールドとフェイクイタリックを修正するために必要なバリエーションを提供するために、@font-faceルールを追加して、font-weightとfont-styleの各組み合わせを参照します。
styles.css
/* Fira Sans Regular */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Regular.eot');
src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Italic.eot');
src: url('fonts/fira/eot/FiraSans-Italic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Italic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Italic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
/* Fira Sans Bold */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Bold.eot');
src: url('fonts/fira/eot/FiraSans-Bold.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Bold.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Bold.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-BoldItalic.eot');
src: url('fonts/fira/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-BoldItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-BoldItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
...
バリエーションが追加されると、コメントを追加して、フォントの太さのグループをより簡単に識別できるようになります。 したがって、最初の@font-faceルールの上にCSSコメントを追加しました。 次に、最初のルールの下に、フォントのイタリック、ボールド、およびボールドのイタリックバリエーション用にさらに3つの@font-faceルールを作成しました。
これらの更新をstyles.cssファイルに保存してから、ブラウザーでindex.htmlを更新してください。 これで、ブラウザは提供されているフォントファミリのすべてのバリエーションをロードしています。 次の画像は、太字、斜体、太字の斜体の偽のバージョンと実際のバージョンの違いを示しています。
真の太字はブラウザの偽の太字よりもはるかに太く、テキストは互いに接近しており、太いフォントストロークを考慮しています。 「イタリック」という単語の小文字のa文字を比較すると、真のイタリックがより顕著になります。 斜体の場合、フォントはa文字のスタイルを変更します。 さらに、真のイタリックの傾斜は、ブラウザの偽のイタリックよりも程度が低くなります。
次に、見出し要素がFira Sansのより薄いウェイトバージョンを使用しているため、ロードするフォントのバリエーションがさらにいくつかあります。
テキストエディタでstyles.cssに戻り、通常のバージョンの@font-faceルールの上にさらに4つの@font-faceルールを作成します。
styles.css
/* Fira Sans Thin */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Thin.eot');
src: url('fonts/fira/eot/FiraSans-Thin.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Thin.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Thin.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-ThinItalic.eot');
src: url('fonts/fira/eot/FiraSans-ThinItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-ThinItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-ThinItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
/* Fira Sans Light */
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-Light.eot');
src: url('fonts/fira/eot/FiraSans-Light.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-Light.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-Light.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-Light.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src: url('fonts/fira/eot/FiraSans-LightItalic.eot');
src: url('fonts/fira/eot/FiraSans-LightItalic.eot') format('embedded-opentype'),
url('fonts/fira/woff2/FiraSans-LightItalic.woff2') format('woff2'),
url('fonts/fira/woff/FiraSans-LightItalic.woff') format('woff'),
url('fonts/fira/woff2/FiraSans-LightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
...
これらの新しいルールは、FiraSansのThinおよびLightバリエーションをロードし、それぞれ100および200font-weight値にマップされます。 これらのサイズには単語の値がないため、通常の太字のfont-weightプロパティの値を数値に変更しました。
これらの変更をstyles.cssに保存してから、ブラウザに戻ってindex.htmlを更新してください。 次の画像に示すように、見出し要素はFiraSansのより薄いバリアントを使用しています。
このセクションでは、@font-faceルールを使用してセルフホストフォントファイルをロードしました。 偽の太字と斜体がフォントの視覚的表現にどのように影響するか、および多くのフォントファイルを共通のfont-family値とリンクする方法を学びました。 前のセクションでは、可変フォントを使用します。これにより、単一のフォントファイルから供給される多くのバリエーションが可能になります。
可変フォントの操作
可変フォントは、Webタイポグラフィのオプションに比較的新しく追加されたものです。 前のセクションでは、各フォントの太さとスタイルを個々のファイルからロードする必要がありましたが、可変フォントには、多くのバリエーションを計算できる単一のファイル内の情報が含まれています。 可変フォントは、パフォーマンスを向上させるだけでなく、以前よりもはるかに多くのデザインの可能性を提供します。 このセクションでは、@font-faceルールを使用して可変フォントをロードし、フォントの表示を微調整して適切なバリエーションを見つけます。
可変フォントの操作を開始するには、テキストエディタでstyles.cssを開きます。 まず、前のセクションからすべての@font-faceルールを削除し、それらを次の新しいルールに置き換えます。
styles.css
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway.woff2') format('woff2');
font-style: normal;
font-weight: 300 800;
}
body {
...
可変フォントは、構造的には標準の@font-faceルールと同じように見えます。 最初にfont-family名を宣言し、次にsrc値のリストを指定しますが、多くの場合、可変フォントでは1つの形式のみが必要です。 このフォントでは、font-styleプロパティがnormalに設定されていました。 font-weightの値には違いがあります。 単一の値を定義する代わりに、範囲は最も薄い重みの後に最も厚い重みが続くように記述されます。 この範囲を定義することにより、ブラウザーは発生する可能性のある変動計算に備えることができます。 ここでは、Ralewayのfont-faceルールを、font-weightの範囲を300から400に設定します。
次に、フォントスタックにRalewayを確立する必要があります。 フォントスタックの先頭から"Fira Sans"を削除し、Ralewayに置き換えます。 名前Ralewayにはスペースが含まれていないため、引用符で囲む必要はありません。
styles.css
...
body {
margin: 0;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 10%);
line-height: 1.5;
font-family: Raleway, "PT Sans", Calibri, Tahoma, sans-serif;
}
...
変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを開きます。 ブラウザは、フェイクウェイトではなくTrueフォントウェイトを生成しますが、定義されたイタリックスタイルがないため、イタリックを正しく処理していません。
Raleway可変フォントのイタリックバージョンを設定するには、テキストエディタでstyles.cssに戻ります。 最初の@font-faceルールの下に、新しいルールセットを作成します。
styles.css
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway.woff2') format('woff2');
font-weight: 300 800;
font-style: normal;
}
@font-face {
font-family: Raleway;
src: url('fonts/raleway/Raleway-Italic.woff2') format('woff2');
font-weight: 300 800;
font-style: italic;
}
body {
...
}
...
srcはフォントファイル名をRaleway.woff2からRaleway-Italic.woff2に変更し、font-styleの値はitalicになりました。
変更内容をstyles.cssに保存し、ブラウザでページを更新します。 ブラウザは現在、Ralewayのさまざまな重みのイタリックバージョンをレンダリングしています。 次の画像は、完全なRaleway可変フォントが設定されたページの更新バージョンを示しています。
可変フォントを使用する利点は、font-weightの範囲で定義された任意の数値全体を使用できることです。 標準のフォントの重みは100の値で増加しますが、可変のフォントの重みは1までの値で増加する可能性があります。 これにより、これまで不可能だった方法でフォントの視覚的なデザインを微調整する方法が提供されます。
範囲の重み値を使用するには、テキストエディタでstyles.cssに戻り、次の変更を加えます。
styles.css
...
h1 {
font-size: 3rem;
font-weight: 350;
}
h2 {
font-size: 2rem;
font-weight: 570;
}
h3 {
font-size: 1.75rem;
font-style: italic;
font-weight: 450;
}
p {
font-size: 1.125rem;
}
strong {
font-weight: 600;
}
h1セレクターの場合、font-weightの値を350に変更しました。 次に、h2 font-weightプロパティを570に設定し、h3を450に設定します。 最後に、font-weightプロパティを650に設定してstrong要素selectを作成しました。
必ずstyles.cssに変更を保存してから、ブラウザに戻ってindex.htmlを更新してください。 ブラウザは、ページ全体にRalewayフォントのさまざまな重みをレンダリングするようになりました。 次の画像は、これがブラウザにどのように表示されるかを示しています。
この最後のセクションでは、Webページに可変フォントをロードして使用しました。 1ダースの標準フォントよりもはるかに多くのバリエーションが1つまたは2つの可変フォントからもたらされる可能性があります。 また、可変フォントを調整して、以前とは異なり、デザインのニーズに適したバリエーションを見つける方法も学びました。
結論
フォントは、デザインの視覚的美学にとって重要な要素です。 それらは、あるWebサイトを別のWebサイトから際立たせるのに役立つアセットとして非常に人気があります。
このチュートリアルを通じて、Webサイトでフォントを使用する主な方法を学びました。 ローカルフォントとフォントスタックを使用して、ロードを試みるフォントをブラウザに指示しました。 次に、フォントホスティングサービスを使用して、GoogleFontsからフォントOpenSansを効果的にロードしました。 次に、独自の一連の@font-faceルールを設定し、独自のセルフホストフォントファミリを作成しました。 最後に、学習した内容に基づいて独自のフォントをロードし、可変フォントを使用して、それらが提供する汎用性とパフォーマンスを試してみました。 フォントがローカル、ホスティングサービス、またはセルフホストのいずれであるかに関係なく、フォントスタックにフォールバックフォントを常に含めることが重要です。これは、不明な理由でフォントが読み込まれない場合があるためです。
CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。
