ウェブサイト検索

カスタムCSSフォントの読み込みと使用方法:完全ガイド


著者は、Write for DOnationsプログラムの一環として寄付を受けるために、Diversity in Tech Fundを選択しました。

紹介

ウェブサイトのビジュアルアイデンティティは、主にデザインの二つの原則、すなわち色とフォントによって決まります。過去10年間で、デバイスにプリロードされたフォントが増え、@font-face<&47;code>ルールを使用してカスタムフォントを読み込む能力、フォントホスティングサービスの利用など、ユーザーにカスタムフォントを提供するための大きな進展がありました。ウェブブラウザも、複数のフォントを補間できる単一のフォントファイルである可変フォント<&47;em>のサポートを実装しています。これにより、高度な調整とフォントのカスタマイズが可能になります。

このチュートリアルでは、ウェブサイトにフォントを読み込む例を試します。利用可能性に基づいてフォントをランク付けしたフォントスタックを使用して、ユーザーのデバイスにインストールされている可能性のあるフォントを使用します。次に、フォントホスティングサービスであるGoogle Fontsを使用して、カスタムフォントを見つけ、選択し、ページに読み込みます。最後に、@font-faceルールを使用して自己ホストされたフォントファミリーを読み込み、その後に自己ホストされた可変フォントを読み込みます。

GitHubからDigitalOcean App Platformを使用してフロントエンドアプリケーションをデプロイします。DigitalOceanにアプリのスケーリングに集中させましょう。

前提条件

  • CSSのカスケードと特異性の機能を理解することは、カスケードと特異性を使ってHTMLにCSSスタイルを適用する方法を読むことで得られます。
  • CSSでスタイルを適用するためのHTML要素の選択方法にある、タイプセレクタ、コンビネータセレクタ、セレクターグループの知識。
  • CSSにおけるフォントスタックとフォントプロパティの理解は、チュートリアル「CSSでフォント、サイズ、色を使ってテキスト要素をスタイルする方法」で見つけることができます。
  • あなたのローカルマシンにindex.html<として保存された空のHTMLファイルで、テキストエディタやお好みのウェブブラウザからアクセスできます。始めるには、私たちの「HTMLプロジェクトの設定方法」チュートリアルを確認し、「HTML要素の使用と理解方法」に従って、ブラウザでHTMLを表示する方法を学んでください。HTMLが初めての方は、「HTMLでウェブサイトを構築する方法」シリーズを試してみてください。

HTMLの設定と初期フォントスタックの作成

フォントスタックの概念は、ウェブの初期にさかのぼります。その頃は、ほとんどのコンピュータにインストールできる信頼できるフォントがいくつかしかありませんでした。フォントが利用できない可能性が高かったため、フォントスタックはブラウザが見つけて読み込むことができるフォントの順序を提供しました。このセクションでは、レジリエントなフォントスタックの原則と、現代のデバイスで利用可能なフォントのオプションについて学びます。しかしまず、フォントを示すための例のHTMLを作成します。

まず、テキストエディタでindex.html<&47;code>を開きます。次に、ファイルに以下の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><&47;code>タグ内の最初の<meta><&47;code>タグは、HTMLファイルの文字セットを定義します。2番目の<meta><&47;code>タグは、モバイルデバイスがページをどのようにレンダリングすべきかを定義します。次に、<title><&47;code>タグがページのタイトルを付けます。最後に、<link><&47;code>タグは、後でページのスタイルを作成するために使用するCSSファイルを参照します。

次に、<body><&47;code>タグ内にページの内容を追加します。この内容は、カップケーキイプサムからのフィラーコンテンツ<&47;em>として知られており、実際には何も言わずにコンテンツのように見えるテキストを提供します。フィラーコンテンツは、以下のコードブロックで強調表示されています。この強調表示の方法は、コードが追加され変更されるチュートリアル全体で出会うことになります。

<!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><&47;code>タグはデフォルトでその内容を太字にし、<em><&47;code>タグはその内容をイタリック体にし、見出しタグはフォントサイズを大きくし、その内容を太字にします。

次に、テキストエディタに戻り、index.html<&47;code>と同じフォルダにstyles.css<&47;code>ファイルを作成します。これは、index.html<&47;code>の<head><&47;code>要素で参照したファイルです。styles.css<&47;code>ファイルに、次のコードを追加します:

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<&47;code>に変更を保存し、次にウェブブラウザを開きます。ファイルをブラウザウィンドウにドラッグするか、ブラウザのファイルを開く<&47;strong>オプションを使用して、index.html<&47;code>をブラウザで開きます。ブラウザはHTMLとCSSコードをレンダリングして、次の画像のようなページを生成します。

ブラウザのindex.html<ファイルのテキストは、ブラウザのローカルデフォルトフォントを使用します。ほとんどの場合、これはタイムズ・ニュー・ローマンのようなセリフフォントです。フォントをカスタマイズする最もパフォーマンスの良い方法は、エンドユーザーのコンピュータにすでにインストールされているフォントを使用することです。ローカルフォントを使用することで、ブラウザは大きなファイルのダウンロードと処理から解放されます。

今日では、選択できるローカルフォントが数十種類あることが多く、これらは「システムフォント」として知られています。マイクロソフトとアップルの両社は、それぞれのシステムに付属するフォントの最新リストを保持しています。

プリインストールされたシステムフォントを使用するには、テキストエディタでstyles.css<&47;code>に戻ります。body<&47;code>セレクタにfont-family<&47;code>プロパティを追加し、その値をフォントスタックとして知られるカンマ区切りのフォントリストにします:

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<&47;code>です。前の3つのフォントが利用できない場合、ブラウザはブラウザのデフォルトのsans-serif<&47;code>フォント、例えばHelveticaやArialを使用します。

styles.css<&47;code>に変更を保存し、ブラウザでindex.html<&47;code>をリフレッシュしてください。使用しているオペレーティングシステムとインストールされているフォントによって、どのフォントが表示され、どのように表示されるかが決まります。以下の画像は、macOSのFirefoxで読み込まれたときのPT Sansフォントの表示例です。

フォントファミリーは、特定のフォントのすべてのウェイトとスタイルのバリエーションで構成されています。ファミリーには、フォントの表示がどれだけ細く、太く、傾いているかを変える多くの追加のウェイトとスタイルが含まれることがあります。

font-style<&47;code>プロパティはフォントの傾きを決定します。値は最も一般的にitalic<&47;code>ですが、一部のフォントはoblique<&47;code>値をサポートしており、傾きの急勾配を示すオプションの度数値を受け入れます。

font-weight<&47;code>プロパティには、normal<&47;code>とbold<&47;code>の2つの定義された名前付き値がありますが、この値を決定する最も多用途で予測可能な方法は、ウェイト番号を使用することです。ウェイト番号の値は、100から900まで100の増分で一般的に定義されており、100が細いウェイト、900が太いウェイトです。ブラウザが指定されたウェイトに対応するフォントを見つけられない場合、最も近い利用可能なサイズを見つけます。

このチュートリアル全体でこのページの新しい基本フォントスタイルを設定するには、テキストエディタでstyles.css<&47;code>に戻ります。次に、h1<&47;code>、h2<&47;code>、h3<&47;code>、およびp<&47;code>要素ごとに要素セレクタを作成します。各セレクタの中に、フォントサイズを増やし、見出しを強調するために以下のコードブロックからハイライトされた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;
}

ここでの

は、font-size3remに設定されており、これは48pxに相当し、font-weight100の細いものです。次に、

2remに設定されており、32pxに相当し、font-weight200です。次に、

は同じfont-weightに設定され、

よりも少し小さいfont-sizeですが、font-styleプロパティがitalicに設定されています。最後に、

要素セレクタは標準のfont-size1.125remに引き上げ、これはこの場合18pxに等しいです。このテキストの全体的なスタイリングの調整は、各セクションで使用されるフォントを変更しても同じままです。

styles.css<&47;code>に変更を保存し、ブラウザに戻ってindex.html<&47;code>をリフレッシュしてください。全体のテキストサイズが大きくなり、見出しスタイルが互いにより明確に区別されるようになりました。以下の画像は、ブラウザでどのように表示されるかを示しています。

このセクションでは、フォントスタックを使用して、ページ上に可能なフォントのシリーズをランク付けされた順序で読み込む方法を学びました。また、font-weight<&47;code>およびfont-style<&47;code>プロパティを使用して、フォントファミリーの可能なバリエーションについても学びました。次のセクションでは、フォントホスティングサービスからフォントを使用します。

ホスティングサービスからフォントファイルを見つけて読み込む

ホスティングフォントサービスは、ウェブサイトにカスタムフォントを見つけて提供するための人気で効果的な方法です。Google Fonts、Adobe Fonts(旧Typekit)、Typography.comなどのサービスは、クライアントがページを表示する際に一時的にダウンロードする高品質のフォントの大規模なライブラリを提供します。これにより、クライアントのシステムにどのフォントがあるかを心配する必要がなくなります。

各フォントホスティングサービスにはフォントを読み込むための独自のプロセスがあり、多くの場合、関連するコストがあります。このセクションでは、Googleのサービスからフォントを見つけて読み込むことになります。Googleはオープンソースおよび限定ライセンスのフォントを無料でホストしています。

まず、fonts.google.com<&47;code>を開きます。ページの上部にある検索バーを使用して、「Open Sans」というフォントを検索します。検索結果には、一致する用語がリストされており、それはGoogle FontsのOpen Sansページへのリンクです。このページには、いくつかのフォントスタイルのリストがあります。これらのフォントの太さとスタイルの組み合わせは、それぞれブラウザがダウンロードするユニークなフォントファイルです。

注意:font-weightおよびfont-styleは、すべてを選択するのではなく、必要に応じて選択する必要があります。選択するフォントが多いほど、ダウンロードするフォントも多くなり、ウェブサイトの読み込み時間が増加します。デザインで使用されるフォントの太さとスタイルのみを読み込むことが重要です。

このデザインでは、Light 300<&47;strong>、Light 300 italic<&47;strong>、Regular 400<&47;strong>、Regular 400 italic<&47;strong>、Bold 700<&47;strong>、およびBold 700 italic<&47;strong>を選択してください。次の画像は、この選択がGoogle Fontsでどのように表示されるかを示しています。

次に、Google Fontsサービスからファイルを読み込むために必要な<link><&47;code>タグをコピーします。そのためには、Google Fontsインターフェースでファイルを読み込む方法として@import<&47;strong>オプションの代わりに<link><&47;code>オプションを選択します。提示された一連の<link><&47;code>タグをコピーします。次に、テキストエディタでindex.html<&47;code>に戻ります。<head><&47;code>要素内に入り、styles.css<&47;code>を読み込む<link><&47;code>タグの後に、Google Fontsからコピーした<link><&47;code>タグを貼り付けます。以下のコードブロックのハイライトされた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><&47;code>要素は、ブラウザに外部ウェブ接続を優先させるプレコネクト<&47;em>と呼ばれるタスクを実行します。これにより、これらの2つの<link><&47;code>要素は、できるだけ早く3つ目の<link><&47;code>からCSSファイルとフォントファイルを読み込むためにブラウザを準備します。

フォントがブラウザに読み込まれる準備が整ったので、次にフォントスタイリングを適用して、テキストがそのフォントで表示されるようにする必要があります。

index.html<&47;code>への変更を保存し、テキストエディタでstyles.css<&47;code>に戻ります。body<&47;code>セレクタで、font-family<&47;code>プロパティに移動します。値の前に、"Open Sans"<&47;code>というフォント名を引用符で囲んで"PT Sans"<&47;code>フォントの前に追加し、カンマを付けます。以下のコードブロックのハイライトされた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からファイルを読み込めない場合、次に利用可能なローカルフォントにフォールバックします。フォントスタックは常に少なくとも2つのフォントを持つことが重要で、スタックの最後のフォントはsans-serif<&47;code>、serif<&47;code>、monospace<&47;code>、または意図したフォントに最も効果的に似ている別の名前付き値である必要があります。

styles.css<&47;code>に変更を保存し、index.html<&47;code>をウェブブラウザで開いてください。ページ上のテキストは、Google Fontsから読み込まれたOpen Sansフォントを使用してレンダリングされます。font-weight<&47;code>が100<&47;code>および200<&47;code>に設定されているテキストは、最も近い300<&47;code>を使用します。以下の画像は、ブラウザでどのように表示されるかを示しています。

このセクションでは、Google Fontsからフォントファミリーを読み込みました。各フォントのウェイトとスタイルがサービスから読み込まれる異なるファイルであること、そして読み込まれるバリエーションの数がサイトのパフォーマンスに影響を与える可能性があることを学びました。次のセクションでは、独自の@font-face<&47;code>ルールを書いて自己ホストされたフォントファイルを読み込みます。

@font-face<&47;code>を使用して自己ホストフォントを読み込む

セルフホスティングフォントは、HTMLやCSSファイルなどの他のウェブコンポーネントと一緒にサーバーに保存されているフォントファイルです。セルフホスティングフォントファイルを検討する一般的な理由は、ホスティングサービスが提供していないフォントを使用したい場合です。セルフホスティングを行うことで、フォント同士の関係や名前をよりコントロールでき、@font-face<&47;code>ルールの定義を通じて設定できます。このセクションでは、自分自身の@font-face<&47;code>ルールを書き、フォントファミリーをウェブページに読み込むことができます。

このセクションでは、オープンソースフォントを含む例のzipファイルをダウンロードする必要があります。ブラウザを通じてダウンロードするか、次のcurl<&47;code>コマンドを使用できます:

curl -sL https://assets.linux-console.net/articles/68060/fonts.zip -o fonts.zip

ファイルをダウンロードしたら、zipファイルに含まれているfonts<&47;code>ディレクトリを抽出し、コンピュータのindex.html<&47;code>およびstyles.css<&47;code>ファイルと同じディレクトリに配置します。Linuxでは、次のunzip<&47;code>コマンドを使用して、コマンドラインからこれを行うことができます。

unzip fonts.zip

次に、テキストエディタでindex.html<&47;code>を開きます。zipファイルからローカルフォントを読み込むため、Googleフォントのコードを削除できます。このセクションでは、既存のstyles.css<&47;code>ファイルからフォントファイルを読み込みます。<head><&47;code>要素の内容が以下のコードブロックのように設定されていることを確認してください。

<!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<&47;code>への編集を保存し、次にテキストエディタでstyles.css<&47;code>を開いてください。

@font-face<&47;code> ルールを使用して、ウェブページにカスタムフォントを読み込むことができます。カスタムフォントの読み込みの歴史は、最も多くのブラウザをサポートするための複合的な方法につながりました。@media<&47;code> や @supports<&47;code> のような他の at ルールとは異なり、@font-face<&47;code> ルールには追加の引数はありません。ルールブロック内では、限られた数のプロパティのみが受け入れられます。最も重要なのは font-family<&47;code> で、これはブラウザが適切なフォントファイルを参照して読み込むために使用する名前を説明します。 次に、src<&47;code>プロパティはフォントファイルの場所を参照します。Internet Explorer 9以前のバージョンをサポートするためには、2つのsrc<&47;code>プロパティが必要で、最初のものは.eot<&47;code>フォントファイル形式のみを参照します。2つ目のsrc<&47;code>プロパティは、フォントファイル形式のカンマ区切りリストになります。ブラウザのバージョンは、サポートされている適切な形式を選択します。

@font-face<&47;code> ルールを使用するには、テキストエディタで styles.css<&47;code> を開きます。ファイルの先頭で、body<&47;code> セレクタの前に、次の @font-face<&47;code> ルールを作成します:

@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<&47;code>プロパティに"Fira Sans"<&47;code>という値を引用符で追加しました。このコードは全体のfont-family<&47;code>を定義しているため、フォント名は1つだけ使用する必要があります。src<&47;code>のカンマ区切りのフォントフォーマットリストは2つの部分に分かれています。最初はurl()<&47;code>で、これはbackground-image<&47;code>プロパティのように、サーバー上のファイルフォーマットへのパスを提供します。次に、format()<&47;code>は参照されているファイルの種類を説明し、ブラウザがサポートされているフォーマットを選択できるようにします。

fontsフォルダー内のfiraフォルダーには、Fira Sansフォントの特定のファイル形式を持つ4つのフォルダーが含まれています。EOTは、MicrosoftがInternet Explorer用に開発したカスタムフォントを読み込むための形式であるEncapsulated OpenTypeを指します。TTFはTrueTypeフォントを指し、元々ウェブ用に開発されたわけではない古いフォント形式です。WOFFおよびWOFF2形式はWeb Open Font Formatを指し、2はその形式の第2版を示しています。ほとんどの現代のブラウザはTTF、WOFF、WOFF2を同等にサポートしています。可能な限り多くのブラウザ形式をカバーする@font-faceルールを作成するために、フォントの複数のソースを提供しました。EOTは両方のsrcプロパティで参照されており、Internet Explorerのバージョン9以降はカンマ区切り形式を使用します。

Fira Sansのための@font-face<&47;code>ルールが作成されたので、body<&47;code>セレクタのfont-family<&47;code>プロパティに移動します。font-family<&47;code>の値で、"Open Sans"<&47;code>を"Fira Sans"<&47;code>に置き換えて、ページで自己ホストされたフォントを使用します。以下のコードブロックのハイライト部分がこの変更を示しています。

@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<&47;code>やindex.html<&47;code>ファイルと同じ場所から読み込まれているにもかかわらず、代替フォントスタックを保持することは重要です。自己ホストされたフォントが読み込まれない理由は数多くあり、ブラウザが問題に直面した場合、十分なバックアップがあればサイトの類似した美的感覚を維持するのに役立ちます。

styles.css<&47;code>に変更を保存し、index.html<&47;code>をウェブブラウザで開いてください。フォントの太字とイタリックのバージョンが正しく表示されないことに気付くでしょう。これは、@font-face<&47;code>ルールで通常のフォントの太さとスタイルのファイルのみが読み込まれ、使用されたためです。ブラウザがフォントに太字やイタリックスタイルを適用する必要があるが、適切なフォントファイルがない場合、ブラウザは必要なバリエーションを作成します。この変更されたフォントの形は、フェイクボールド<&47;em>およびフェイクイタリック<&47;em>として知られています。フェイクボールドはフォントにストロークを追加することで作成され、しばしば文字間のスペースが広くなり、意図したレイアウトに干渉する可能性があります。フェイクイタリックはフォントを傾けることで作成され、しばしば本物のイタリックほどスペースをうまく使用しません。

次の画像は、ブラウザでのフェイクボールド、イタリック、ボールドイタリックスタイルの表示方法を示しています。

ブラウザにフォントファミリーの適切なバリエーションを提供するためには、@font-face<&47;code> ルールにより多くの詳細を提供する必要があり、追加のバリエーションファイルを読み込むためのルールをさらに作成する必要があります。

テキストエディタでstyles.css<&47;code>に戻ります。@font-face<&47;code>ルールで、2番目のsrc<&47;code>プロパティの後にfont-weight<&47;code>とfont-style<&47;code>プロパティを追加します:

@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<&47;code>に設定します。font-weight<&47;code>において、normal<&47;code>の値は400<&47;code>の数値的重みの値に相当します。これらのプロパティは、ブラウザに通常のバリエーションにこれらのフォントファイルを適用するよう指示します。したがって、テキストが通常の重みとスタイルである必要があるときにFiraSans-Regular<&47;code>フォントファイルが使用されます。

次に、フェイクボールドとフェイクイタリックを修正するために必要なバリエーションを提供するために、各font-weight<&47;code>とfont-style<&47;code>の組み合わせを参照するために、より多くの@font-face<&47;code>ルールを追加します。

/* 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<&47;code>ルールの上にCSSコメントを追加しました。その後、最初のルールの下に、フォントのイタリック、ボールド、ボールドイタリックのバリエーションのためにさらに3つの@font-face<&47;code>ルールを作成しました。

これらの更新をstyles.css<&47;code>ファイルに保存し、ブラウザでindex.html<&47;code>をリフレッシュしてください。ブラウザは現在、提供されたフォントファミリーのすべてのバリエーションを読み込んでいます。以下の画像は、フェイクと本物の太字、イタリック体、太字イタリック体の違いを示しています。

本物の太字はブラウザの擬似太字よりもはるかに太く、文字がより近くに配置されており、太いフォントストロークを考慮しています。本物のイタリック体は、「Italic」という単語の小文字のa文字を比較するとより顕著です。フォントはイタリック体のときにa文字のスタイルを変更します。さらに、本物のイタリック体の傾きはブラウザの擬似イタリック体よりも小さいです。

次に、見出し要素がFira Sansの細いウェイトバージョンを使用しているため、いくつかのフォントのバリエーションを読み込む必要があります。

テキストエディタでstyles.css<&47;code>に戻り、通常のバージョンの@font-face<&47;code>ルールの上にさらに4つの@font-face<&47;code>ルールを作成します。

/* 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;
}
...

これらの新しいルールは、Thin<&47;code>とLight<&47;code>のFira Sansのバリエーションを、それぞれ100<&47;code>と200<&47;code>のfont-weight<&47;code>値にマッピングします。これらのサイズに対する単語の値がないため、通常と太字のfont-weight<&47;code>プロパティの値を数値に変更しました。

これらの変更をstyles.css<&47;code>に保存し、ブラウザに戻ってindex.html<&47;code>をリフレッシュしてください。見出し要素は、以下の画像に示されているように、Fira Sansの細いバリアントを使用しています。

このセクションでは、@font-face<&47;code> ルールを使用して自己ホストされたフォントファイルを読み込みました。フェイクボールドやイタリックがフォントの視覚的なプレゼンテーションにどのように影響するか、そして多くのフォントファイルを共通のfont-family<&47;code> 値でリンクする方法を学びました。最後のセクションでは、単一のフォントファイルから多くのバリエーションを持つ可変フォントを使用します。

可変フォントを使った作業

可変フォントは、ウェブタイポグラフィの選択肢に比較的新しい追加です。前のセクションでは、各フォントの太さやスタイルが個別のファイルから読み込まれる必要がありましたが、可変フォントは多くのバリエーションを計算できる情報を単一のファイルに含んでいます。可変フォントはパフォーマンスを向上させるだけでなく、以前よりもはるかに多くのデザインの可能性を提供します。このセクションでは、@font-face<&47;code> ルールを使用して可変フォントを読み込み、フォントの表示を調整して適切なバリエーションを見つけます。

可変フォントを使い始めるには、テキストエディタでstyles.css<&47;code>を開きます。まず、前のセクションからすべての@font-face<&47;code>ルールを削除し、次の新しいルールに置き換えます:

@font-face {
  font-family: Raleway;
  src: url('fonts/raleway/Raleway.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 800;
}

body {
...

可変フォントは、構造的には標準の@font-face<&47;code>ルールと同じように見えます。最初にfont-family<&47;code>名を宣言し、次にsrc<&47;code>値のリストを提供しますが、可変フォントの場合は通常1つのフォーマットだけが必要です。このフォントのfont-style<&47;code>プロパティはnormal<&47;code>に設定されました。違いはfont-weight<&47;code>値にあります。単一の値を定義する代わりに、最も細いウェイトから最も太いウェイトまでの範囲が記述されます。この範囲を定義することで、ブラウザは発生する可能性のある変動計算に備えることができます。ここでは、font-face<&47;code>ルールをRalewayに設定し、font-weight<&47;code>の範囲を300<&47;code>から400<&47;code>に設定します。

次に、フォントスタックにRalewayを設定する必要があります。フォントスタックの最初から"Fira Sans"<&47;code>を削除し、Raleway<&47;code>に置き換えます。Raleway<&47;code>という名前にはスペースが含まれていないため、引用符で囲む必要はありません。

...
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<&47;code>に変更を保存し、ウェブブラウザでindex.html<&47;code>を開いてください。ブラウザは偽のフォントウェイトではなく、実際のフォントウェイトを生成しますが、定義されたイタリックスタイルが不足しているため、イタリック体を正しく扱っていません。

Raleway可変フォントのイタリックバージョンを設定するには、テキストエディタでstyles.css<&47;code>に戻ります。最初の@font-face<&47;code>ルールの下に、新しいルールセットを作成します。

@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<&47;code>はフォントファイル名をRaleway.woff2<&47;code>からRaleway-Italic.woff2<&47;code>に変更し、font-style<&47;code>の値は現在italic<&47;code>です。

styles.cssに変更を保存し、ブラウザでページを更新してください。ブラウザは現在、Ralewayのさまざまなウェイトのイタリックバージョンをレンダリングしています。以下の画像は、フルRaleway可変フォントセットを使用したページの更新版を示しています。

可変フォントを使用する利点は、font-weight<&47;code>範囲で定義された任意の整数値が利用可能であることです。標準のフォントウェイトは100の値で増加しますが、可変フォントのウェイトは1の値で増加することができます。これにより、以前は不可能だった方法でフォントの視覚デザインを微調整する手段が提供されます。

範囲からの重みの値を使用するには、テキストエディタでstyles.css<&47;code>に戻り、次の変更を行ってください。

...
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<&47;code>セレクタについて、font-weight<&47;code>の値を350<&47;code>に変更しました。次に、h2<&47;code>のfont-weight<&47;code>プロパティを570<&47;code>に設定し、h3<&47;code>を450<&47;code>にしました。最後に、strong<&47;code>要素を作成し、font-weight<&47;code>プロパティを650<&47;code>に設定しました。

styles.css<&47;code>への変更を必ず保存し、ブラウザに戻ってindex.html<&47;code>をリフレッシュしてください。ブラウザは現在、ページ全体でRalewayフォントのさまざまなウェイトをレンダリングしています。以下の画像は、ブラウザでの表示方法を示しています。

この最終セクションでは、ウェブページで可変フォントを読み込み、使用しました。1つまたは2つの可変フォントからは、12の標準フォントよりもはるかに多くのバリエーションが得られます。また、デザインニーズに合った適切なバリエーションを見つけるために可変フォントを調整する方法も学びました。以前とは異なる程度で。

よくある質問

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<&47;code> ルールについて詳しく知りたい方は、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フォントをインポートする方法は?

.ttf(TrueTypeフォント)ファイルを使用している場合は、次のように@font-faceを使用して含めることができます:

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/CustomFont.ttf') format('truetype');
}

ただし、より良いブラウザサポートのために、TTFの代わりにWOFFまたはWOFF2を使用することをお勧めします。

5. CSSにカスタムスタイルを追加するにはどうすればよいですか?

CSSプロパティを使用して、font-weight<&47;code>、font-style<&47;code>、およびletter-spacing<&47;code>のようなカスタムフォントをスタイリングできます。

例 :

p {
  font-family: 'MyCustomFont', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}

テキストスタイリングについて詳しく学ぶには、CSSでフォント、サイズ、色を使ってテキスト要素をスタイルする方法に関するこのチュートリアルを参照できます。

6. カスタムフォントをより速く読み込むために最適化するにはどうすればよいですか?

  • WOFF2形式を使用してください。これはウェブ使用に最も最適化されています。
  • フォント表示をスワップに設定して、レンダーブロッキングを防ぎます。
  • 外部CDNに依存せず、レイテンシの問題を避けるためにフォントを自己ホストしてください。
  • 可変フォントを使用して、必要なフォントファイルの数を減らします。

7. Google Fontsを使わずにカスタムフォントを使用できますか?

はい、フォントファイルをダウンロードして@font-face<&47;code>を使用することで、カスタムフォントを自己ホストできます。これにより、フォントのパフォーマンスと可用性を完全に制御できます。

8. ウェブフォントに最適なファイル形式は何ですか?

ウェブに推奨されるフォント形式はWOFF2<&47;strong>であり、圧縮と品質の最良のバランスを提供します。

フォーマットプロ欠点
WOFF2ウェブに最適で、高度に圧縮されています非常に古いブラウザでのサポートは限られています
WOFFWOFF2の良いフォールバックやや大きなファイルサイズ
TTFプラットフォームを超えて機能しますウェブ使用に最適化されていない
OTF高品質なタイポグラフィの特徴大きなファイルサイズ

結論

フォントはデザインの視覚的美学の重要な要素です。それらは、あるウェブサイトを別のウェブサイトから際立たせるのに役立つ非常に求められる資産です。

このチュートリアルを通じて、ウェブサイトでフォントを使用する主な方法を学びました。ローカルフォントとフォントスタックを使用して、ブラウザにどのフォントを読み込むかを指示しました。その後、フォントホスティングサービスを使用して、Google FontsからフォントOpen Sansを効果的に読み込みました。次に、自分自身の一連の@font-face<&47;code>ルールを設定し、自己ホスト型フォントのファミリーを作成しました。最後に、自己ホスト型フォントを読み込むことで学んだことを基に、可変フォントを使用し、その多様性とパフォーマンスを試しました。フォントがローカルであれ、ホスティングサービスからであれ、自己ホスト型であれ、フォントスタックには常にフォールバックフォントを用意することが重要であることを忘れないでください。なぜなら、フォントが不明な理由で読み込まれない可能性があるからです。

さらにCSSチュートリアルを読みたい場合は、CSSでHTMLをスタイリングする方法シリーズの他のチュートリアルを試してみてください。