CSSカスタムフォント解説
2024-09-18
CSSでカスタムフォントを使う
CSSでカスタムフォントを使用するには、@font-faceルールを利用します。これは、ローカルファイルや外部サーバーからフォントをインポートし、ウェブページで使用できるようにするものです。
基本的な構文
@font-face {
font-family: 'MyCustomFont'; /* フォント名 */
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff'); /* フォントファイル */
/* その他のフォントプロパティを追加することもできます */
}
重要なプロパティ
unicode-range: 使用する文字範囲を指定します。font-style: フォントのスタイルを指定します（e.g.,normal,italic).src: フォントファイルのパスとフォーマットを指定します。通常、woff2とwoffの両方をサポートします。font-family: カスタムフォントの名前を指定します。
使用方法
<body>
<p>This text uses the custom font.</p>
</body>
body {
font-family: 'MyCustomFont', sans-serif; /* カスタムフォントを指定 */
}
注意点
- フォントファイルのサイズが大きすぎると、ページの読み込み時間が遅くなる可能性があります。
- ブラウザのサポート状況を確認し、適切なフォントフォーマットを使用してください。
- カスタムフォントファイルは、ウェブサーバーにアップロードする必要があります。
例
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.woff2') format('woff2'),
url('Roboto-Regular.woff') format('woff');
}
body {
font-family: 'Roboto', sans-serif;
}
この例では、Robotoというカスタムフォントをインポートし、ウェブページで使用しています。
@font-face {
font-family: 'MyCustomFont'; /* フォント名 */
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff'); /* フォントファイル */
/* その他のフォントプロパティを追加することもできます */
}
<body>
<p>This text uses the custom font.</p>
</body>
body {
font-family: 'MyCustomFont', sans-serif; /* カスタムフォントを指定 */
}
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.woff2') format('woff2'),
url('Roboto-Regular.woff') format('woff');
}
body {
font-family: 'Roboto', sans-serif;
}
フォントホスティングサービスを利用する
- デメリット
- メリット
- 自身のサーバーにフォントファイルをアップロードする必要がない。
- CDN（コンテンツデリバリーネットワーク）を利用して、高速な配信が可能。
例
Google Fonts, Typekit, Font Awesome
フォントアイコンを使用する
- デメリット
- メリット
- 小さなアイコンフォントを使用することで、ファイルサイズを小さくできる。
- CSSで簡単にアイコンを操作できる。
例
Font Awesome, Ionicons, Material Icons
SVGフォントを使用する
- デメリット
- メリット
- ベクター形式なので、高解像度でも鮮明な表示が可能。
- CSSでスタイルをカスタマイズできる。
例
Icomoon, Fontastic
JavaScriptライブラリを利用する
- デメリット
- メリット
- フォントの読み込みやレンダリングを管理する機能を提供。
- カスタムフォントの使用方法を簡素化できる。
例
Fontface Observer, Web Font Loader
サーバーサイドレンダリング（SSR）を利用する
- デメリット
- サーバー側の負荷が増える。
- メリット
- SEOに有利。
css font-face
