Webデザインをワンランクアップ！CSSでカスタムフォントを使いこなす

2024-06-23

CSSでカスタムフォントを使用する

@font-face ルールの基本構文

@font-face {
  font-family: フォントファミリー名; /* フォントファミリー名を定義 */
  src: url('フォントファイルパス') format('フォントフォーマット'); /* フォントファイルのパスと形式を指定 */
}

この例では、以下の内容を定義しています。

font-family: フォントファミリー名。この名前でフォントを呼び出すことができます。
src: フォントファイルのパスと形式。カンマ区切りで複数ファイルを指定することもできます。
- url(): フォントファイルのURLパスを記述します。
- format(): フォントファイルの形式を記述します。例：ttf、woff、eotなど。

補足:

font-weight、font-style、font-stretch などのプロパティを使用して、フォントのスタイルをさらに調整することができます。
ウェブフォントによっては、ライセンスの購入が必要となる場合があります。

カスタムフォントを使用する例

以下の例は、Roboto というフォントをウェブページに組み込む方法を示しています。

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Regular.woff2') format('woff2'),
       url('Roboto-Regular.woff') format('woff');
}

body {
  font-family: 'Roboto', sans-serif; /* フォントファミリーを指定 */
}

この例では、以下の処理が行われます。

@font-face ルールで、Roboto というフォントファミリーを定義します。
Roboto-Regular.woff2 と Roboto-Regular.woff という2つのフォントファイルを指定します。
body 要素に Roboto フォントを適用します。ブラウザが Roboto フォントを持っていない場合は、sans-serif フォントが代替として使用されます。

その他の注意点

多くの場合、フォントファイルをウェブサーバーにアップロードする必要があります。
異なるフォント形式を複数指定することで、ブラウザの互換性を向上させることができます。
カスタムフォントの使用は、ページの読み込み速度に影響を与える可能性があります。パフォーマンスが問題になる場合は、フォントの使用量を制限することを検討してください。

サンプルコード：CSSでカスタムフォントを使用する

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カスタムフォントの例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>見出し</h1>
  <p>本文</p>
</body>
</html>

CSS

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Regular.woff2') format('woff2'),
       url('Roboto-Regular.woff') format('woff');
}

h1 {
  font-family: 'Roboto', sans-serif;
}

説明:

HTML ファイルで、h1 見出し要素と本文パラグラフ要素を定義します。
CSS ファイルで、@font-face ルールを使用して Roboto フォントを定義します。
- フォントファイルのパスと形式を指定します。
h1 見出し要素に Roboto フォントを適用します。

実行結果:

以下のコードは、Roboto フォントをボタンに適用し、太字にする例です。

button {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}

このコードを実行すると、ボタンのフォントが Roboto になり、太字で表示されます。

このサンプルコードを参考に、様々な要素にカスタムフォントを適用して、デザイン性の高いウェブページを作成することができます。

上記のコードはあくまで一例です。使用するフォントやスタイルに合わせて、適宜変更してください。
カスタムフォントを使用する前に、フォントライセンスの確認を忘れないようにしてください。

CSSでカスタムフォントを使用する代替方法

Webフォントサービスを利用する

Google Fonts や Adobe Fonts などのWebフォントサービスを利用すれば、様々なフォントを無料で簡単にウェブページに組み込むことができます。これらのサービスは、フォントファイルのホスティングと配信を行っているため、自分でサーバーにアップロードする必要がありません。

利点:

簡単で使いやすい
豊富なフォント数
フォントファイルの管理が不要

サービスによっては利用規約や制限がある
すべてのフォントが利用できるわけではない
読み込み速度に影響を与える可能性がある

@font-faceルールとWebフォントサービスを併用する

@font-face ルールと Web フォントサービスを併用することで、柔軟性と利便性を両立することができます。Web フォントサービスでホスティングされているフォントをベースに、フォントの太さやスタイルを独自に調整することができます。

Web フォントサービスの利便性を活かしつつ、独自のカスタマイズが可能
読み込み速度の最適化が可能

@font-face ルールの記述が必要
フォントによっては商用利用にライセンスが必要

フォントファイルを直接サーバーにアップロードする

@font-face ルールを使用して、フォントファイルを直接サーバーにアップロードすることもできます。これにより、フォントの使用に関する完全なコントロールを得ることができます。

ライセンスの制限なく自由にフォントを使用できる
読み込み速度を完全に制御できる

サーバーの負荷が増加する可能性がある

@font-synthesis を使用する

CSS の @font-synthesis プロパティを使用すると、システムフォントを組み合わせて擬似的なカスタムフォントを作成することができます。この方法は、フォントファイルを追加することなく、軽量でシンプルなカスタムフォントを実現したい場合に有効です。

フォントファイルを追加する必要がない
読み込み速度が速い

利用できるフォントが限られる
本来のカスタムフォントとは異なる見た目になる可能性がある

SVGフォントを使用する

SVGフォントは、ベクター画像として定義されたフォントです。スケーラビリティが高く、あらゆるデバイスで鮮明な表示が可能です。しかし、他のフォント形式に比べてファイルサイズが大きくなるという欠点があります。

高いスケーラビリティ
鮮明な表示

ファイルサイズが大きい
すべてのブラウザで完全な互換性が保証されない

手軽に導入したい場合は、Webフォントサービスがおすすめです。
独自のカスタマイズや高度な制御が必要な場合は、@font-face ルールとWebフォントサービスの併用またはフォントファイルの直接アップロードがおすすめです。
軽量でシンプルなカスタムフォントが必要な場合は、@font-synthesis がおすすめです。
ベクター画像としての利点を活かしたい場合は、SVGフォントがおすすめです。

それぞれの方法の特徴と利点・欠点を理解した上で、最適な方法を選択してください。