ウェブデザインにおいてフォント選びは重要な要素の一つです。デフォルトのフォントだけでなく、カスタムフォントを使用することで、デザインに個性を加えることができます。本記事では、CSSの@font-faceを使ってカスタムフォントを導入する方法を詳しく解説します。
カスタムフォントとは？
カスタムフォントは、ブラウザにインストールされていない独自のフォントをウェブページで使用するための仕組みです。これにより、特定のブランドやテーマに合ったデザインを実現できます。
基本的な@font-faceの構文
カスタムフォントを使用するには、CSSで@font-faceを定義します。以下が基本構文です。
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font.woff2') format('woff2'),
url('fonts/custom-font.woff') format('woff');
}解説
font-family:
フォントの名前を指定します。この名前は後でCSSで使用します。src:
フォントファイルの場所を指定します。複数のフォーマットを指定してブラウザ互換性を確保します。format:
フォント形式を指定します（例:woff2,woff,truetype）。
フォント形式の種類
カスタムフォントを使用する際には、以下の形式を考慮します。
| フォーマット | 特徴 | 推奨度 |
|---|---|---|
| WOFF2 | 最新のフォーマットで軽量 | 高い |
| WOFF | 広くサポートされるフォーマット | 高い |
| TTF/OTF | 古い形式、互換性は高い | 中程度 |
| SVG | モバイル向け、一部ブラウザのみ | 低い |
実際にフォントを適用する方法
１．フォントファイルを準備する
フォントファイル（例: custom-font.woff2）をプロジェクトのフォルダに保存します。
２．CSSに@font-faceを記述する
以下のようにカスタムフォントを定義します。
@font-face {
font-family: 'MyFont';
src: url('fonts/my-font.woff2') format('woff2'), url('fonts/my-font.woff') format('woff');
}３．フォントを適用するfont-familyプロパティで指定した名前を使ってスタイルを適用します。
body {
font-family: 'MyFont', sans-serif;
}Google Fontsを活用する方法
カスタムフォントを手動で設定する代わりに、Google Fontsを利用することもできます。
１．Google Fontsのサイトでフォントを選択
Google Fontsから好きなフォントを選びます。
２．リンクタグをHTMLに追加
提供されるコードをHTMLの<head>内に追加します。
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">３．CSSでフォントを適用
CSSで指定します。
body {
font-family: 'Roboto', sans-serif;
}フォントの最適化と注意点
- 複数フォーマットを用意する:
すべてのブラウザで正しく表示されるようにします。 - フォントの読み込み速度に注意:
ファイルサイズが大きいとページの読み込みが遅くなるため、軽量なフォーマットを選びましょう。 - ライセンスを確認する:
使用するフォントが商用利用可能か確認してください。
まとめ
カスタムフォントを使用することで、ウェブデザインに独自性を加えることができます。@font-faceを使えば、簡単にフォントを導入できますが、ブラウザ互換性や読み込み速度を考慮することが重要です。ぜひ、本記事を参考にしてカスタムフォントを活用してみてください！
最後まで読んでいただきありがとうございます！
このブログは初心者向けwebデザイナー向けにHTML、CSSの基礎知識を発信しています。
この記事を読んだ方に少しでもお役に立てれば幸いです。
