Google Fonts の使い方

スタイルシートを読み込み，スタイルを設定する

前のページで選んだ「Train One」というフォントを見出しに設定してみよう．画面右にある「Select this style」をクリックする．

選択されたので，画面右上のアイコン「Viwe your selected families」をクリックする．

画面の右側に「Selected family」が表示された．右下の2つの項目をそれぞれコピーして，HTMLソースに貼り付ける．

上画面の右に囲った2つの四角のうち，上のコードを <head> の中（6〜7行目）に貼り付ける．また，<h1> タグのフォントを指定したいので，下のコードを9行目に入力した h1{ } の中に貼り付ける．

index.html<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Google Fonts サンプル</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Train+One&display=swap" rel="stylesheet">
  <style>
    h1 {
      font-family: 'Train One', cursive;
    }
  </style>
</head>
<body>
<h1>Google Fonts の使い方</h1>
<p>
  このサンプルは Google Fonts のスタイルシートを読み込み，<h1> タグに 'Train One' というフォントを設定したものです．
</p>
<p>
  サンプルの文章です．Google Fonts を使ってみよう．Googleが提供しているフォントをクラウド経由で使うことで，どのようなOSや端末であっても同じデザインのフォントが利用できるようになります．
</p>
</body>
</html>

上のソースのサンプルはここから確認できます．見出しのフォントが変更できました．PC やスマートフォンでも同じフォントで表示されるはずです．なお，上のコードの10行目にある font-family: 'Train One', cursive; は，「Train One」が利用できなければ「cursive」を利用する，という意味です．