パソコンには最初からいくつかフォント（文字の形）が入っていますが、種類はそう多くありません。でも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に名前を書いて、はじめて反映される