WebページでのGoogleFontsの使用

Google Fontsは、Googleが無料で提供するサービスで、何千ものフォントにアクセスできます。利用可能なすべてのフォントはオープンソースライセンスの下にあります。つまり、商用プロジェクトと非商用プロジェクトの両方で自由に使用できます。

入門

この記事では、WebページでのGoogleFontsの使用について説明します。以下は、現在の定型的なWebページの外観です。

そして、これが定型的なHTMLマークアップです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My web page</title>
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>

かなり退屈ですねより良いフォントで少しスパイスを効かせましょう。

フォントの選択

フォントを選択する時が来ました。 fonts.google.com に移動し、小さな（ + ）（プラス）ボタンを押して、好きなフォントを選択します。 Karlaを使用します。フォントを選択したら、ページ下部の引き出しを展開します。

使用するフォントをインポートする方法は2つあります。最初の方法では、Standardラベルの下のコードボックスにコードをコピーします。次に、マークアップに戻って、コピーしたコードとスタイルタグをこのようにドキュメントの先頭に追加します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My web page</title>

  <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>

上記のURLの例から、GoogleFontsが font-displayプロパティをサポートするようになりました。 🎉

別のCSSスタイルシートを既にお持ちの場合は、@importラベルの下のコードをコピーして、そのようにスタイルシートの上部に追加します。

@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');

.element {
  /* ... */
}

フォントの使用

フォントをインポートしました。今度はフォントを使用します。次のように、HTMLマークアップのbodyをKarlaを使用するように設定しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My web page</title>

  <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">

  <style>
      body {
        font-family: 'Karla', sans-serif;
      }
  </style>
</head>
<body>
  <h1>Welcome to my website</h1>
</body>
</html>

さて、私たちのWebページを見ると、次のようになっています。

それはずっと良く見えます！

✨それは簡単でしたね。これで、Google Fontsが提供する無料のフォントホスティングを使用して、Webページをより美しく見せることができます。読んでくれてありがとう！