パソコンには最初からいくつかフォント（文字の形）が入っていますが、種類はそう多くありません。でもWebには、無料で使えるフォントを配ってくれる場所があります。それが Google Fonts。丸っこい文字、手書き風、かっちりした明朝体——気分に合わせて、ページの“文字の顔”を選べます。
1. フォントを選ぶ
まずはサイトを開いて、気になるフォントを探します。
日本語のフォントを探すときは、Filters から「Japanese」を選ぶと、日本語に対応したものだけが並びます。気に入ったフォントを選んだら、右上あたりの 「Get font」→「Get embed code」 に進みます。
2. <link> を <head> に貼る
すると、こんな感じの <link ...> のコードが出てきます（@import ではなく <link> の方を選びましょう）。これをコピーして、HTMLの <head> の中に貼りつけます。
<head>
<meta charset="UTF-8" />
<title>わたしのページ</title>
<!-- ↓ Google Fontsからコピーした行をここに -->
<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" />
</head>3行のうち上の2つは「先に接続しておいてね」とブラウザに伝える、読みこみを速くするためのおまじないです。意味が分からなくてもそのまま貼って大丈夫。2行目を消さないのがポイントで、フォント本体はこのfonts.gstatic.comから届きます。
これで、そのフォントがページに読みこまれる準備ができました。まだ見た目は変わりません。「使ってね」とCSSで指定するのが最後のステップです。
3. CSSで font-family に書く
同じページの埋め込みコードの中に、こう使ってね、という一行も書いてあります。それをCSSにうつします。
body {
font-family: "Kosugi Maru", sans-serif;
}保存してブラウザを見ると——文字の形が変わっているはず。body に書けばページ全体、h1 に書けば見出しだけ、と場所も選べます。
太さ（ウェイト）も選べる
多くのフォントは、同じ形のまま太さ（ウェイト）を数段階から選べます。Google Fontsで埋め込みコードを作るとき、「Regular 400」「Bold 700」のように使いたい太さを選んで追加すると、その分が <link> のURLにふくまれます。CSS側では font-weight で切りかえます。
たとえば、太さが9段階あるNoto Sans JPで、標準と太字の2つを読みこむ場合——
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet" />h1 {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700; /* 読みこんだ太字を使う */
}まとめ
- Google Fontsは無料で使えるWebフォントの宝庫
<head>に<link>を貼って、フォントを読みこむ- CSSの
font-familyに名前を書いて、はじめて反映される
お気に入りのフォントが1つ決まると、ページ作りはぐっと楽しくなります。