パソコンには最初からいくつかフォント（文字の形）が入っていますが、種類はそう多くありません。でも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 href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet" />
</head>これで、そのフォントがページに読みこまれる準備ができました。まだ見た目は変わりません。「使ってね」とCSSで指定するのが最後のステップです。
3. CSSで font-family に書く
同じページの埋め込みコードの中に、こう使ってね、という一行も書いてあります。それをCSSにうつします。
body {
font-family: "Kosugi Maru", sans-serif;
}保存してブラウザを見ると——文字の形が変わっているはず。body に書けばページ全体、h1 に書けば見出しだけ、と場所も選べます。
見出しだけ好きなフォントにして、本文はふつうのまま——これだけで“作った感”が一気に出るよ。まずは1つ、お気に入りを見つけてみて〜
まとめ
- Google Fontsは無料で使えるWebフォントの宝庫
<head>に<link>を貼って、フォントを読みこむ- CSSの
font-familyに名前を書いて、はじめて反映される