03ホームページ中級講座 Googleフォントを指定
今回は、Google Webフォント設定を行います。設定するファイルは、「02ホームページ中級講座 ナビゲーションの作成(CSS)」で作成したコードを使います。
Google のWebフォントを指定する
ブラウザのデフォルトフォントについて
ブラウザのフォントは、特に指定がない場合、OSやブラウザのデフォルトフォントで表示されます。
例えば：
- Windows（Chrome）: 「メイリオ」という等幅フォントが使用されます。
- Mac（Safari）: 「ヒラギノ角ゴシック」というフォントが使われます。
ブラウザやOSによってフォントが異なるため、制作側ではフォントを明示的に指定して、クロスブラウザ対応を行うことが一般的です。
font-familyプロパティ
font-familyは、要素に適用するフォントを優先順位のリストとして指定するためのCSSプロパティです。
body {
font-family: "メイリオ", sans-serif;
}
- “メイリオ”: 特定のフォント名（優先順位1位）。
- sans-serif: 総称ファミリー（優先順位2位）。特定のフォントが利用できない場合に適用。
総称ファミリーとは？
総称ファミリーは、フォントの大まかなカテゴリを指します。ブラウザが特定のフォントをサポートしていない場合、総称ファミリーが指定されたスタイルに基づいてフォントを選択します。
sans-serif（ゴシック形）- 線が滑らかで装飾が少ないフォント（例: Arial、Helvetica）。
serif（明朝形）- 文字に装飾（セリフ）が付いたフォント（例: Times New Roman）。
monospace（等幅フォント）- 全ての文字幅が同じフォント（例: Courier）。
cursive（筆記体）- 手書き風のフォント。
fantasy（装飾形）- デザイン的で個性的なフォント。
スペースを含むフォント名
カタカナや漢字、スペースを含むフォント名は、必ずダブルクォートまたはシングルクォートで囲みます。囲まないとブラウザが正しく認識せず、スタイルが適用されない場合があります。
body {
font-family: "ヒラギノ角ゴシック", sans-serif;
}
よく使われるfont-familyの例
ウェブサイト制作では、読みやすさやデザインの統一性を考慮して、よく使われるフォントをfont-familyで指定します。ここでは、具体的な使用例とともに紹介します。
ここでは、左から“ヒラギノ角ゴ ProN W3”, HiraKakuProN-W3が適用。これは、Macで標準的に使用される日本語フォント。滑らかでモダンなゴシック体です。次に、“游ゴシック”, “Yu Gothic” Windows 8以降で標準となった日本語フォント。モダンでシンプルなデザイン。次に、“メイリオ”, Meiryo Windows環境でよく使われるフォント。文字の間隔が広めで、読みやすさに優れています。次は英語フォントで、Verdana WindowsやMacで広く使われるサンセリフ系フォント。可読性が高い。Helvetica デザイナーに人気のフォントで、Mac環境での標準フォント Arial 世界中で最も広く使われるサンセリフフォントの一つ。フォールバック用として適切。 最後に、sans-serif 万が一、すべての指定フォントが利用できない場合の最終的なバックアップ。サンセリフ系の標準的なフォントが表示されます。
body {
font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Verdana, Helvetica, Arial, sans-serif;
}
以下は、“Helvetica Neue”がMac用 そのあとがWindows環境でよく使われるフォントArialと続きます。“Hiragino Kaku Gothic ProN”: Mac環境で標準の日本語ゴシックフォント。“Hiragino Sans”: よりモダンなデザインで、日本語と英語の混在環境に適しています。Meiryo: Windows環境での標準フォントで、読みやすさに優れています。sans-serif: 万が一すべての指定フォントが使えない場合のフォールバック
body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
Webフォントの利用
上記のfont-familyの設定は、ユーザーが使用しているパソコンにインストールされているフォントを参照しています。そのため、以下のように複数のフォントを指定し、代替フォントを使う形になります
- ヒラギノ角ゴ ProN W3がインストールされていればそれを使用。
- 入っていなければ游ゴシック。
- それもなければメイリオ。
- 最終的にsans-serifという総称ファミリーが適用されます。
このように、「使えるフォントが見つかるまで試していく」消去法で表示される仕組みです。
フォントがデザイン通りにならない場合
デザインカンプを作成したデザイナーは、「クライアントの希望するフォントで閲覧してほしい」と考えることが多いです。しかし、ユーザーの環境にインストールされていないフォントは表示されないため、思い通りのデザインを再現できない場合があります。
Webフォントとは？
そこで登場するのが、Webフォントです。
Webフォントを使用すると、指定したフォントがユーザーの端末にインストールされていなくても、Webサーバーからフォントを読み込み、デザイン通りに表示することができます。
Webフォントのメリット
- フォントの一貫性を保つ
- ユーザー環境に依存せず、指定したフォントを全ての環境で表示可能。
- SEO対策に効果的
- 文字情報として扱えるため、過去のようにデザインカンプから文字を画像化して書き出す必要がありません。
- 検索エンジンが文字を認識できるため、SEOの効果が期待できます。
- レスポンシブ対応が容易
- 文字サイズや行間の調整がしやすく、デザインの柔軟性が向上します。
Google Fontsを使ったWebフォントの設定
Google Fonts はオープンソースのフォントですので、商用利用可で利用できるサービスです。
ダウンロードしてインストールし、パソコン内のアプリケーションで使用する方法と、WebフォントとしてHTMLに、CDNファイルを読み込んで表示させる方法があります。
左上のSearch fontsからフォント名を入力して検索（エンターキー）します。
またカテゴリーのボタン 下記の例だとSerif となっているところをクリックすると、Serif(ゴシック系）、SansSerif（明朝系）などを絞り込んで検索できます。
また、言語で絞れるのでJapaneaseだけ表示することも可能です。
下記はNoto Serif Japaneseを検索した結果表示されている状態です。
Noto Serif Japaneseの枠上をクリックしてみましょう。Noto Serif Japaneseの右横にある７stylesということは、細い、中ぐらい、太い などの太さの段階が７種類あるということです。日本語の書体は、太さの段階が少ないので、段階が多い書体は「Noto Sans」はダウンロードしておくとタイトルと文章などで太さのメリハリがつけれて便利です。
右上のDownload familyボタンからパソコンにダウンロードできます。
ダウンロード後インストールを行いましょう。すべての太さをインストールする場合は、７書体あるので７回インストールすることになります。
また今回の練習のように、インストールせずにWebフォントとして使う場合は、各フォントの右側にある Regular 400などの横にあるプラスをクリックします。複数選択する場合は、複数プラスをクリックしましょう。
WebフォントにKosugi Maruを設定
次は、google フォントのKosugi Maruを上記と同様に検索しましょう。下記の関連サイトからも開きます。今回はダウンロードせず、Webフォントとして使いますので、使用するフォントにある（プラスアイコン）ボタンをクリックして、HTMLに貼り付けるコードとCSSに貼り付けるコードを開きます。
上記のように右にコードが書いてあるサイドバーが現れない場合は、ヘッダーにある、Selectfamily 左横のアイコンを探してクリックしてみてください。
まずはHTMLコードをコピーして、該当するHTMLファイルの title要素の下に貼り付けます。
<title>エコロジーと環境問題</title>
<!-- googleフォント-->
<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=Kosugi+Maru&display=swap" rel="stylesheet">
<!-- /googleフォント-->
<link rel="stylesheet" type="text/css" href="style.css">
CSS側はbody要素にfont-family を使って指定します。
body {
background-image: url(bk.jpg);
font-size: 1em;
line-height: 1.7;
font-family: 'Kosugi Maru', sans-serif;
}
その他のGoogle Font
完成イメージ
全体的に丸っこいイメージのフォントとなりました。
次はdisplay:flexを行います！
