カスタムCSSフォントの読み込みと使用方法：完全ガイド
著者は、Write for DOnationsプログラムの一環として寄付を受けるためにDiversity in Tech Fundを選択しました。
紹介
ウェブサイトのビジュアルアイデンティティは、主にデザインの二つの原則、すなわち色とフォントによって決まります。この10年間で、デバイスにプレロードされたフォントが増え、@font-faceルールを使用してカスタムフォントを読み込む能力、フォントホスティングサービスの利用など、ユーザーにカスタムフォントを提供するための大きな進展がありました。また、ウェブブラウザは、複数のフォントを補間できる単一のフォントファイルである可変フォントのサポートも実装しています。これにより、高度な調整やフォントのカスタマイズが可能になっています。
このチュートリアルでは、ウェブサイトにフォントを読み込む例を試します。利用可能性に基づいてフォントをランク付けしたフォントスタックを使用して、ユーザーのデバイスにインストールされている可能性のあるフォントを使用します。次に、フォントホスティングサービスであるGoogle Fontsを使用して、カスタムフォントを見つけ、選択し、ページに読み込みます。最後に、@font-faceルールを使用して自己ホストされたフォントファミリーを読み込み、続いて自己ホストされた可変フォントを読み込みます。
DigitalOcean App Platformを使用して、GitHubからフロントエンドアプリケーションをデプロイします。アプリのスケーリングにDigitalOceanが集中できるようにしましょう。
前提条件
- CSSのカスケードと特異性の機能を理解することができ、これは「カスケードと特異性を使用してHTMLにCSSスタイルを適用する方法」を読むことで得られます。
- CSSでスタイルを適用するためのHTML要素を選択する方法に記載されているタイプセレクタ、コンビネータセレクタ、セレクターグループに関する知識。
- CSSにおけるフォントスタックとフォントプロパティの理解は、チュートリアル「CSSでフォント、サイズ、カラーでテキスト要素をスタイルする方法」にあります。
- ローカルマシンに
index.htmlとして保存された空のHTMLファイルがあり、好きなテキストエディタやウェブブラウザからアクセスできます。始めるには、HTMLプロジェクトの設定方法に関するチュートリアルを確認し、ブラウザでHTMLを表示する方法についての指示を含むHTML要素の使い方を理解する方法をフォローしてください。HTMLに不慣れな場合は、HTMLでウェブサイトを構築する方法シリーズ全体を試してみてください。
HTMLの設定と初期フォントスタックの作成
フォントスタックの概念は、ウェブの初期にさかのぼります。その当時、ほとんどのコンピュータにインストールできる信頼できるフォントは数種類しかありませんでした。フォントが利用できない可能性が高かったため、フォントスタックはブラウザが探して読み込むことができるフォントの順序を提供しました。このセクションでは、弾力性のあるフォントスタックの原則と、最新のデバイスで利用可能なフォントのオプションについて学びます。しかしまず、フォントを示すための例となるHTMLを作成します。
index.htmlをテキストエディタで開くことから始めます。次に、ファイルに以下の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からのフィラーコンテンツとして知られており、実際には何も言わずにコンテンツのように見えるテキストを提供します。フィラーコンテンツは、以下のコードブロックで強調表示されています。この強調表示の方法は、コードが追加および変更されるにつれて、チュートリアル全体で出会うことになります:
<!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> タグはそのコンテンツを斜体にし、見出しタグはフォントサイズを大きくし、そのコンテンツを太字にします。
次に、テキストエディタに戻り、index.htmlと同じフォルダにstyles.cssファイルを作成します。これは、index.htmlの<head>要素で参照したファイルです。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への変更を保存したら、ウェブブラウザを開いてください。index.htmlファイルをブラウザウィンドウにドラッグするか、ブラウザのファイルを開くオプションを使って、ブラウザで開いてください。ブラウザはHTMLとCSSコードをレンダリングし、次の画像のようなページを作成します。
index.htmlファイルのテキストは、ブラウザのローカルデフォルトフォントを使用します。多くの場合、これはTimes New Romanのようなセリフフォントです。フォントをカスタマイズする最もパフォーマンスの良い方法は、エンドユーザーのコンピュータにすでにインストールされているフォントを使用することです。ローカルフォントの使用は、ブラウザが大きなファイルをダウンロードして処理する必要を軽減します。
今日では、選べるローカルフォントが数十種類あることが多く、これらはシステムフォントとして知られています。マイクロソフトとアップルの両社は、それぞれのシステムに付属するフォントの最新リストを保管しています。
プリインストールされたシステムフォントを使用するには、テキストエディタで styles.css に戻ります。body セレクタに font-family プロパティを追加し、その値をカンマ区切りのフォントのリスト、いわゆるフォントスタックにします:
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のオペレーティングシステムに標準でインストールされており、Google Fontsから無料で入手することもできます。次のフォントは「Calibri」で、その後にカンマがあり「Tahoma」が続きます。CalibriはMicrosoftのフォントで、最近のWindowsバージョンにインストールされています。また、TahomaはMicrosoftの別のフォントで、Appleのオペレーティングシステムには10年以上も前から存在しています。
最終的なフォントは一般的な名前付きスペースの値 sans-serif です。前の三つのフォントが利用できない場合、ブラウザはブラウザのデフォルトの sans-serif フォント、例えばHelveticaやArialを使用します。
変更をstyles.cssに保存し、ブラウザでindex.htmlをリフレッシュしてください。使用しているオペレーティングシステムとインストールされているフォントによって、どのフォントが表示され、どのように表示されるかが決まります。以下の画像は、macOSのFirefoxで読み込まれたときにPT Sansフォントがどのように表示されるかを示しています。
フォントファミリーは、特定のフォントのすべてのウェイトとスタイルのバリエーションで構成されています。ファミリーには、フォントがどれくらい細く、太く、傾いて表示されるかを変更する多くの追加のウェイトとスタイルが含まれることがあります。
font-style プロパティは、フォントの傾斜を決定します。最も一般的な値は italic ですが、一部のフォントは oblique 値をサポートしており、傾斜の急勾配を示すためのオプションの度数値を受け入れます。
font-weightプロパティには、normalとboldの2つの定義された名前の値がありますが、この値を決定する最も多用途で予測可能な方法は、ウェイト番号を使用することです。ウェイト番号の値は、通常100から900まで100の増分で定義され、100は細いウェイト、900は太いウェイトとなります。ブラウザが指定されたウェイトに対応するフォントを見つけられない場合、利用可能なサイズの中で最も近いものを見つけます。
このページ全体の新しい基本フォントスタイルを設定するために、テキストエディタでstyles.cssに戻ります。それから、h1、h2、h3、およびp要素それぞれの要素セレクタを作成します。各セレクタ内に、フォントサイズを大きくし、見出しを強調するために次のコードブロックからハイライトされた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はfont-sizeが3remに設定されており、これは48pxに相当し、font-weightは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プロパティを使用して、フォントファミリーの可能なバリエーションについても学びました。次のセクションでは、フォントホスティングサービスからフォントを使用します。
ホスティングサービスからフォントファイルを見つけてロードする
ホスティングフォントサービスは、ウェブサイトにカスタムフォントを見つけて提供するための人気かつ効果的な方法です。Google Fonts、Adobe Fonts（以前のTypekit）、Typography.comのようなサービスは、大規模な高品質フォントのライブラリを提供しており、クライアントはあなたのページを表示する際に一時的にダウンロードします。これにより、クライアントのシステムにどのフォントがあるかを心配する必要がなくなります。
各フォントホスティングサービスにはフォントを読み込むための独自のプロセスがあり、多くの場合関連する費用がかかります。このセクションでは、Google のサービスからフォントを見つけて読み込む方法を説明します。Google のサービスはオープンソースおよび制限付きライセンスのフォントを無料でホストしています。
まず、fonts.google.comを開きます。ページの上部にある検索バーを使って「Open Sans」というフォントを検索します。検索結果には一致する用語がリストされ、これはGoogle FontsのOpen Sansページへのリンクです。このページには、いくつかのフォントスタイルのリストがあります。これらのフォントのウェイトとスタイルの組み合わせは、それぞれ独自のフォントファイルであり、ブラウザがダウンロードします。
注: 各 font-weight と font-style はすべて選択するのではなく、必要に応じて選択する必要があります。選択するフォントが多いほど、ダウンロードする必要のあるフォントが増え、ウェブサイトの読み込み時間が長くなります。デザインで使用するフォントのウェイトとスタイルだけを読み込むことが重要です。
このデザインでは、Light 300、Light 300 italic、Regular 400、Regular 400 italic、Bold 700、およびBold 700 italicを選択してください。以下の画像は、Google Fontsでこの選択がどのように見えるかを示しています:
次に、Google Fontsサービスからファイルを読み込むために必要な<link>タグをコピーします。そのためには、Google Fontsインターフェースでファイルを読み込む方法として@importオプションの代わりに<link>オプションを選択します。提示された一連の<link>タグをコピーします。そして、テキストエディタでindex.htmlに戻ります。<head>要素内に入り、styles.cssを読み込む<link>タグの後に、Google Fontsからコピーした<link>タグを貼り付けます。以下のコードブロックに強調表示された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つの要素は、ブラウザに外部ウェブ接続を優先させるプリコネクトという作業を実行します。これにより、これらの2つの要素は、ブラウザが3つ目のからCSSファイルとフォントファイルをできるだけ早く読み込む準備をします。
フォントがブラウザでページに読み込まれる準備が整ったので、次にそのフォントスタイルを適用して、テキストがそのフォントで表示されるようにする必要があります。
index.htmlへの変更を保存したら、テキストエディタでstyles.cssに戻ります。bodyセレクタ内で、font-familyプロパティに移動します。値の最初に「Open Sans」というフォント名を追加し、その後に「PT Sans」フォントをカンマで続けてください。次のコードブロックに示されたハイライトされた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;
}
...
フォントスタックの先頭に Open Sans を追加することで、ブラウザが Google からファイルを読み込めない場合に次の利用可能なローカルフォントにフォールバックします。フォントスタックは常に少なくとも二つのフォントを持つことが重要であり、スタックの最後のフォントは sans-serif、serif、monospace、または意図したフォントに最も効果的に似ている別の名前付き値にする必要があります。
styles.css の変更を保存し、index.html をウェブブラウザで開いてください。ページのテキストは、Google Fonts から読み込まれた Open Sans フォントを使用してレンダリングされます。font-weight が 100 および 200 に設定されているテキストは、代わりに利用可能な最も近い 300 を使用します。次の画像は、ブラウザでどのように表示されるかを示しています。
このセクションでは、Google Fontsからフォントファミリーを読み込みました。各フォントのウェイトとスタイルがサービスから読み込まれる異なるファイルであること、そして読み込まれたバリエーションの数がサイトのパフォーマンスに影響を与える可能性があることを学びました。次のセクションでは、独自の@font-faceルールを作成して、自己ホストされたフォントファイルを読み込みます。
@font-faceを使ったセルフホスティングフォントの読み込み
自己ホスティングフォントは、HTMLやCSSファイルなどの他のウェブコンポーネントと一緒にサーバーに保存されているフォントファイルです。自己ホスティングフォントファイルを検討する一般的な理由は、ホスティングサービスが提供していないフォントを使用したい場合です。自己ホスティングを行うと、フォント同士の関係や名前をどのように設定するかをコントロールできるようになり、@font-faceルールの定義を介して設定することができます。このセクションでは、自分自身の@font-faceルールを書き、フォントのファミリーをウェブページに読み込む方法を学びます。
このセクションでは、オープンソースのフォントを含む例のzipファイルをダウンロードする必要があります。これをブラウザを通じてダウンロードするか、以下のcurlコマンドを使用することができます:
- curl -sL https://assets.linux-console.net/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> 要素の内容が次のコードブロックのように設定されていることを確認してください:
<!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 ルールを使用できます。カスタムフォントの読み込みの歴史は、最も多くのブラウザをサポートするための複合的な方法につながりました。他の at-ルール、例えば @media や @supports とは異なり、@font-face ルールには追加の引数はありません。ルールブロック内では、指定された数のプロパティのみが受け入れられます。最も重要なのは font-family で、これはブラウザが適切なフォントファイルを参照および読み込むために使用する名前を記述します。次に、src プロパティはフォントファイルの場所を参照します。バージョン9以前のInternet Explorerをサポートするためには、2つの src プロパティが必要で、最初のプロパティは .eot フォントファイル形式のみを参照します。2番目の src プロパティは、フォントファイル形式のコンマ区切りリストになります。ブラウザのバージョンは、サポートされている適切な形式を選択します。
@font-face ルールを使用開始するには、テキストエディタで styles.css を開きます。ファイルの先頭で、body セレクタの前に次の @font-face ルールを作成します:
@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 {
...
}
...
このルールの中で、font-family プロパティに "Fira Sans" という値を引用符で囲んで追加しました。このコードは全体の font-family を定義しているため、使用するフォント名は1つだけであるべきです。src のカンマ区切りのフォント形式リストは2部に分かれています。最初は url() で、これは background-image プロパティのように、サーバー上のファイルフォーマットへのパスを提供します。その後、format() が参照されているファイルの種類を説明し、ブラウザがサポートされているフォーマットを選択できるようにします。
fontsフォルダー内のfiraフォルダーには、Fira Sansフォントの特定のファイル形式を持つ4つのフォルダーが含まれています。EOTはEncapsulated OpenTypeの略で、MicrosoftがInternet Explorer用に開発したカスタムフォントを読み込むための形式です。TTFはTrueTypeフォントの略で、元々ウェブ用に開発されたわけではない古いフォント形式です。WOFFとWOFF2形式はWeb Open Font Formatの略で、“2”は形式の2番目のバージョンを表しています。大多数のモダンブラウザはTTF、WOFF、およびWOFF2を同等にサポートしています。できるだけ多くのブラウザ形式をカバーする@font-faceルールを作成するために、フォントのために複数のソースを提供しました。EOTは、Internet Explorerのバージョン9以降がカンマ区切り形式を使用するため、両方のsrcプロパティで参照されています。
Fira Sansの@font-faceルールが作成されたので、bodyセレクタのfont-familyプロパティに移動します。font-familyの値では、"Open Sans"を"Fira Sans"に置き換えて、ページ上でセルフホストフォントを使用します。以下のコードブロックのハイライト部分がこの変更を示しています。
@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に変更を保存し、index.htmlをウェブブラウザで開いてください。フォントの太字とイタリックバージョンが見た目が少しおかしいことに気付くでしょう。これは、@font-faceルールで通常のフォントの太さとスタイルのファイルだけが読み込まれ、使用されたためです。ブラウザがフォントに太字やイタリックスタイルを適用しようとするが、適切なフォントファイルが不足している場合、ブラウザは必要なバリエーションを作成します。この変更されたフォントの形式は、疑似太字および疑似イタリックとして知られています。疑似太字は、フォントにストロークを追加することで作成され、しばしば文字間が広くなり、意図したレイアウトに干渉する可能性があります。疑似イタリックはフォントを傾けることによって作成され、しばしば真のイタリックほどスペースを適切に使用しません。
次の画像は、ブラウザでフェイクボールド、イタリック、ボールドイタリックスタイルがどのように表示されるかを示しています。
ブラウザにフォントファミリーの適切なバリエーションを提供するためには、@font-face ルールにより詳細を提供する必要があり、追加のバリエーションファイルを読み込むためのルールをさらに作成する必要があります。
テキストエディタでstyles.cssに戻ります。@font-faceルールで、2番目のsrcプロパティの後にfont-weightプロパティとfont-styleプロパティを追加します:
@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-weight と font-style の組み合わせを参照する追加の @font-face ルールを加えます:
/* 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をリフレッシュしてください。あなたのブラウザは、提供されたフォントファミリーのすべてのバリエーションを読み込んでいます。以下の画像は、偽の太字、イタリック体、および太字イタリック体のバージョンの違いを示しています:
本物のボールドはブラウザの疑似ボールドよりもはるかに太く、テキストがより近く配置されていて、太いフォントストロークを考慮しています。本物のイタリックは、単語「Italic」における小文字のa文字を比較する際により顕著になります。フォントはイタリックにするとa文字のスタイルを変更します。さらに、本物のイタリックの傾斜はブラウザの疑似イタリックよりも少ない角度です。
次に、見出し要素がFira Sansの細いウェイトバージョンを使用しているため、いくつかのフォントのバリエーションをロードする必要があります。
styles.cssに戻り、通常版の@font-faceルールの上に、さらに4つの@font-faceルールを作成します:
/* 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;
}
...
これらの新しいルールは、Fira SansのThinおよびLightバリエーションを、100および200のfont-weight値にそれぞれマッピングします。これらのサイズに言葉の値がないため、通常および太字のfont-weightプロパティの値を数値に変更しました。
styles.cssにこれらの変更を保存してから、ブラウザに戻り、index.htmlをリフレッシュしてください。見出し要素は現在、以下の画像に示すようにFira Sansの細いバリアントを使用しています:
このセクションでは、@font-face ルールを用いて自己ホストされたフォントファイルを読み込みました。フェイクボールドやイタリックがフォントの視覚的な提示にどのように影響するか、また、共通のfont-family 値を使って複数のフォントファイルをリンクする方法について学びました。最後のセクションでは、1つのフォントファイルから多くの変種を許可する可変フォントを使用します。
可変フォントを使用する
可変フォントは、ウェブタイポグラフィの選択肢に比較的新しく加えられたものです。前のセクションでは、各フォントのウェイトとスタイルは個別のファイルから読み込む必要がありましたが、可変フォントは単一のファイル内に多くのバリエーションを計算するための情報を含んでいます。可変フォントはパフォーマンスを向上させるだけでなく、以前よりもはるかに多くのデザインの可能性を提供します。このセクションでは、@font-face ルールを使用して可変フォントを読み込み、フォントの表示を調整して適切なバリエーションを見つけます。
可変フォントを使い始めるには、テキストエディタでstyles.cssを開きます。まず、前のセクションからすべての@font-faceルールを削除し、次の新しいルールに置き換えます:
@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値にあります。単一の値を定義するのではなく、最も細いウェイトから最も太いウェイトまでの範囲が書かれます。この範囲を定義することによって、ブラウザは発生する可能性のある変動計算に備えることができます。ここでは、300から400までのfont-weight範囲を持つRalewayのfont-faceルールを設定します。
次に、フォントスタックにRalewayを設定する必要があります。フォントスタックの最初から"Fira Sans"を削除し、それをRalewayに置き換えます。名前Ralewayにはスペースが含まれていないため、引用符は必要ありません。
...
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への変更を保存し、index.htmlをウェブブラウザで開いてください。ブラウザはフェイクのフォントウェイトではなく、本当のフォントウェイトを生成しますが、イタリックスタイルが定義されていないため、イタリック体を正しく処理していません。
Raleway変数フォントのイタリック版を設定するには、テキストエディタでstyles.cssに戻ります。最初の@font-faceルールの下に、新しいルールセットを作成します。
@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に戻り、次の変更を行ってください:
...
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 要素を作成しました。
styles.cssへの変更を必ず保存してください。それからブラウザに戻り、index.htmlをリフレッシュしてください。ブラウザはページ全体でRalewayフォントのさまざまなウェイトをレンダリングします。次の画像は、ブラウザでどのように表示されるかを示しています:
この最終セクションでは、ウェブページに可変フォントを読み込み、使用しました。標準フォントが十数種類あるよりも、1つまたは2つの可変フォントから多くのバリエーションを得ることができます。また、デザインニーズに合わせて適切なバリエーションを見つけるために、可変フォントを調整する方法も学びました。これは以前とは異なる程度のものです。
よくある質問
1. カスタムフォントをCSSにインポートする方法は？
カスタムフォントをCSSにインポートするには、@font-faceルールを使用します。これにより、カスタムフォントを定義し、スタイルシートで使用することができます。以下は簡単な例です:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
@font-faceルールをより深く理解するために、CSS @font-faceに関するこのガイドをチェックしてください。
2. CSSで特別なフォントをどのように使用しますか？
特別なフォントを使用するには、まず@font-faceを使用してフォントを読み込むか、Google FontsやAdobe FontsなどのCDNを介してインポートする必要があります。その後、font-familyプロパティを使用してフォントを適用します。
例 :
h1 {
font-family: 'Poppins', sans-serif;
font-size: 32px;
}
テキスト要素のスタイリングを探している場合は、CSSでフォント、サイズ、カラーを使ってテキスト要素をスタイルする方法に関するこのガイドが役立つでしょう。
3. カスタムフォントをインストールして使用するにはどうすればよいですか？
- ステップ1: WOFF2、WOFF、TTF、またはOTF形式でフォントファイルをダウンロードします。
- ステップ2：フォントファイルをプロジェクトのfonts/ディレクトリに置きます。
- ステップ3: @font-faceを使用して、CSS内の要素に定義し適用します。
高度なテクニックについては、フォントの太さやスタイルを動的に調整する方法を説明しているこのCSS変数フォントに関するガイドをチェックしてください。
4. CSSでTTFフォントをインポートする方法は？
TrueTypeフォント（.ttf）ファイルを使用している場合は、次のようにして@font-faceを使用して含めることができます:
@font-face {
font-family: 'CustomFont';
src: url('fonts/CustomFont.ttf') format('truetype');
}
しかし、より良いブラウザサポートのために、TTFの代わりにWOFFまたはWOFF2を使用することをお勧めします。
5. カスタムスタイルをCSSに追加するにはどうすればいいですか？
CSSプロパティを使用して、font-weight、font-style、およびletter-spacingのようなカスタムフォントにスタイルを適用できます。
例 :
p {
font-family: 'MyCustomFont', sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: 1px;
}
テキストスタイリングについてもっと学ぶには、CSSでフォント、サイズ、色を使ってテキスト要素をスタイルする方法に関するこのチュートリアルを参照してください。
6. カスタムフォントをより速く読み込むために最適化するにはどうすればよいですか？
- WOFF2形式を使用してください。これはウェブ使用に最適化されているためです。
- フォント表示をスワップに設定して、描画のブロッキングを防ぎます。
- 外部CDNに依存するのではなく、自分でホストしたフォントを使用して遅延の問題を回避してください。
- 可変フォントを使用して、必要なフォントファイルの数を減らします。
7. Google Fontsを使わずにカスタムフォントを使用できますか？
はい、フォントファイルをダウンロードして@font-faceを使用することで、カスタムフォントを自己ホストできます。これにより、フォントのパフォーマンスと可用性を完全に制御できます。
8. ウェブフォントに最適なファイル形式は何ですか？
ウェブ用に推奨されるフォント形式はWOFF2です。これは、圧縮と品質のバランスが最も優れています。
| フォーマット | プロ | コンス |
|---|---|---|
| WOFF2 | ウェブに最適で、高度に圧縮されています。 | 非常に古いブラウザでは限られたサポートのみ |
| ワオフ | WOFF2の良いフォールバック | 少し大きなファイルサイズ |
| TTF | プラットフォームを越えて動作します | ウェブ使用に最適化されていません |
| OTF | 高品質のタイポグラフィ機能 | 大きなファイルサイズ |
結論
フォントはデザインの視覚的美学の重要な要素です。ウェブサイトが他と一線を画すために役立つ、高く評価される資産です。
このチュートリアルを通じて、ウェブサイトでフォントを使用する主な方法を学びました。ローカルフォントとフォントスタックを使用して、ブラウザにどのフォントを読み込むかを指示しました。そして、フォントホスティングサービスを使って、Google FontsからOpen Sansフォントを効果的に読み込む方法を学びました。次に、自分自身の一連の@font-faceルールを設定し、自分自身でホストするフォントのファミリーを作成しました。最後に、自分のフォントを読み込むことで学んだことを基に、バリアブルフォントを使用し、それが提供する柔軟性とパフォーマンスを試しました。フォントがローカルであろうと、ホスティングサービスからのものであろうと、自分自身でホストしたものであろうと、必ずフォントスタックにフォールバックフォントを持つことが重要であることを忘れないでください。なぜなら、フォントが未知の理由で読み込まれない場合があるからです。
CSSのチュートリアルをもっと読みたい場合は、「CSSでHTMLをスタイリングする方法」シリーズの他のチュートリアルを試してみてください。