Google Fonts

3个月前公開 0 0

Google Fontsとは？使い方、選び方、日本語フォント、おすすめフォント 1. Google Fontsとは？ Google Fonts (https://fonts.google.com/) は、Googleが提供する無料のWebフォントサービスです。1000種類以上のフォントが提供されており、Webサイトやアプリケーションで自...

保存日時：

2025-02-20

公式サイト

フロントエンド開発

Google Fonts

Google Fontsとは？使い方、選び方、日本語フォント、おすすめフォント

1. Google Fontsとは？

Google Fonts (https://fonts.google.com/) は、Googleが提供する無料のWebフォントサービスです。1000種類以上のフォントが提供されており、Webサイトやアプリケーションで自由に利用できます。商用利用も可能です。フォントは、ダウンロードしてデスクトップで使用することもできます。CDN (Content Delivery Network) 経由で提供されるため、高速に読み込むことができます。Webフォントを使うことで、デザインの幅が広がり、ユーザーの環境に依存せず、意図したフォントを表示できます。

2. Google Fontsの使い方

Google Fontsのウェブサイトにアクセス。
フォントを探す。
- 検索ボックスでフォント名を検索。
- カテゴリー (Serif, Sans Serif, Display, Handwriting, Monospace) で絞り込む。
- 言語 (Language) で絞り込む (日本語フォントを探す場合は「Japanese」を選択)。
- フォントのプロパティ (太さ、幅など) で絞り込む。
- 並べ替え (人気順、トレンド順、新着順など)。
フォントを選択。
- フォントをクリックすると、詳細ページが表示される。
- 「Select this style」の横にある「＋」ボタンをクリックして、スタイルを選択。 (複数のスタイルを選択可能)
Webサイトに埋め込む。
- 右側のパネルに選択したフォントが表示されます。
- <link> タグまたは @import ルールを使って、CSSにフォントを読み込むコードをコピー。
- <head> タグ内(linkタグ利用時)、もしくはCSSファイル内(@import利用時)にペースト。
- CSSで、font-family プロパティを使って、フォントを指定。
- 使用例(<link>タグ):
```
<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=Roboto:wght@400;700&display=swap" rel="stylesheet">
```
- 使用例(CSS):
```
body {
  font-family: 'Roboto', sans-serif;
}
```
ダウンロードして使う (デスクトップ):
- フォントの詳細ページで、「Download family」をクリックすると、フォントファイル (.ttf) がダウンロードされる。

3. フォントの選び方

用途に合わせて選ぶ:
- 本文用: 可読性の高い、シンプルなフォント (例: Roboto, Noto Sans)。
- 見出し用: 個性的なフォント (例: Montserrat, Playfair Display)。
- ロゴ用: 印象的なフォント (例: Lobster, Pacifico)。
デザインに合わせて選ぶ:
- モダンなデザイン: Sans Serifフォント。
- 伝統的なデザイン: Serifフォント。
- 手書き風のデザイン: Handwritingフォント。
太さ (Weight) やスタイル (Style) を選ぶ:
- 必要な太さ (細字、標準、太字など) を選択。
- イタリック体 (Italic) が必要な場合は、それを含むスタイルを選択。
複数のフォントを組み合わせる:
- 相性の良いフォントの組み合わせを選ぶ (Google Fontsのペアリング機能を参考にすると良い)。
- フォントの数を少なくする (多くても2〜3種類)。
可読性を確認する:
- さまざまなサイズやデバイスで、フォントが読みやすいかを確認。

4. 日本語フォントについて

Google Fontsには、多くの日本語フォントがあります。
「Language」で「Japanese」を選択すると、日本語フォントのみを表示できます。
主な日本語フォント:
- Noto Sans JP (ゴシック体)
- Noto Serif JP (明朝体)
- M PLUS 1p (丸ゴシック体)
- M PLUS Rounded 1c (丸ゴシック体)
- Sawarabi Gothic (ゴシック体)
- Sawarabi Mincho (明朝体)
- Kosugi (ゴシック体)
- Kosugi Maru (丸ゴシック体)
日本語フォントは、ファイルサイズが大きいため、必要な文字だけをサブセット化して読み込むと、表示速度が向上します。