3.1 Webフォント
ウェブページでのフォントの接続は、ユニークで魅力的なデザインを作成する上で重要な役割を果たしてるよ。 Webフォントを使うと、ユーザーのコンピュータにインストールされていないフォントもサーバーからダウンロードして使用できるようになるんだ。Google FontsはWebフォントを使うための最も人気のあるサービスの一つだよ。WebフォントとGoogle Fontsの接続方法を詳しく見ていこう。
Webフォントとは、リモートサーバーからダウンロードしてウェブページに表示するフォントのことで、ユーザーのデバイスにインストールされていなくても使えるんだ。これにより、フォントの選択に柔軟性が増し、より魅力的なデザインが可能になるよ。
Webフォントの接続
@font-faceを使ったWebフォントの接続例:
まず、フォントファイルをサーバーにアップロードしなきゃいけないんだ。通常、.woff、.woff2、.ttf、.eot、.svg形式のファイルが使われるよ。
ステップ2. 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を使う利点:
- コントロール: フォントの選択と使用を完全にコントロールできる
- 互換性: 異なるブラウザとの互換性を確保するためにさまざまなフォーマットをサポート
- WOFF (Web Open Font Format): Webフォント用の広くサポートされているフォーマット
- WOFF2: 圧縮が改善されたWOFFのバージョン
- TTF (TrueType Font): 大多数のブラウザでサポートされている標準フォントフォーマット
- EOT (Embedded OpenType): Internet Explorerでサポートされているフォーマット
- SVG: SVGグラフィックスでフォントを使うためのフォーマット
3.2 Google Fonts
Google Fontsは無料で利用できるフォントのコレクションを提供していて、簡単にウェブサイトに統合できるんだ。 Google Fontsを使う利点は、接続が簡単で利用可能なフォントの種類が多いことだよ。
Google Fontsを使ったフォントの接続:
1. Google Fontsサイトでフォントを選ぶ:
Google Fontsにアクセスして、使いたいフォントを選んでね。
2. 接続リンクを取得:
選んだフォントのページで、必要なウェイトやスタイルを選んでね。その後、Google Fontsがフォント接続用のリンクを生成するよ。
3. HTMLドキュメントにリンクを挿入:
生成されたリンクをコピーして、HTMLドキュメントの<head>セクションに挿入してね。
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. CSSでのフォントの適用:
ページの要素にフォントを適用するには、font-familyプロパティを使ってね。
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Google FontsをHTMLで使う例:
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>このテキストはRobotoフォントを使って表示されています。</p>
</body>
</html>
3.3 CSS @importの使用
Google Fontsは、CSSの@importルールを使って接続することもできるよ。
@importを使ったGoogle Fontsの使用例:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Google Fontsを使う利点:
- 使いやすさ: 一本のコードで簡単にフォントを統合できる
- 豊富な選択肢: さまざまなスタイルやカテゴリの多くのフォントにアクセスできる
- パフォーマンスの最適化: Googleの高性能なサーバーからフォントがロードされる
Google Fontsのウェブフォントの接続コードのdisplay="swap"属性は、パフォーマンスとユーザーエクスペリエンスを向上させるよ。ウェブフォントを接続するとき、ブラウザはまずフォントをダウンロードして表示する必要があるから、テキストの表示に遅れが生じることがあるんだ。特にインターネットが遅いときにね。display="swap"はこの問題を解決し、ウェブフォントがダウンロードされるまでシステムフォントを使うようブラウザに指示するんだ。ウェブフォントがダウンロードされたら、ブラウザは自動でそれに置き換えるよ。
パフォーマンスへの影響:
Webフォントを使うときは、ウェブページのパフォーマンスへの影響を考慮することが重要だよ。フォントやウェイトを大量にロードすると、ページのロード時間が長くなることがあるんだ。この影響を最小限にするために、次の推奨事項に従ってね:
- 最小限必要なウェイトを使う: 本当に必要なウェイトだけを選んでね
- 属性を使う
display="swap": これはウェブフォントがロードされるまでシステムフォントでテキストを表示することで、ユーザーのパフォーマンスの印象を向上させる - フォント配信の最適化: キャッシュや事前ロード（preload）を使ってパフォーマンスを向上させてね
GO TO FULL VERSION