CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

WebページでGoogle Fontsを使用する方法をわかりやすく解説

WebページにGoogle Fonts（グーグルフォント）を導入すると、標準のフォントでは表現できない個性的で魅力的なデザインを実現できます。手順はとてもシンプルで、HTMLのhead要素内でフォントを読み込み、CSSのfont-familyプロパティで指定するだけです。

Google Fontsの基本的な使い方

以下の手順でWebページにGoogle Fontsを適用できます。

  1. Google Fonts公式サイトから使いたいフォントを選ぶ
  2. 発行されたlinkタグをHTMLのhead内に貼り付ける
  3. CSSのfont-familyプロパティでフォント名を指定する

コード例

ここでは、手書き風のデザインが特徴的な「Permanent Marker」というフォントを読み込む例を紹介します。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>
<style>
    body {
        font-family: "Permanent Marker", cursive;
        font-size: 22px;
    }
</style>
</head>
<body>
<h1>Google fonts example</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiores.
</p>
<h2>1 2 3 4 5 6 7 8 9 10</h2>
</body>
</html>

コードのポイント解説

  • linkタグ： head要素内に記述し、Google Fontsのサーバーからスタイルシートを読み込みます。URLの「family=Permanent+Marker」の部分で読み込むフォントを指定しています。
  • display=swap： フォントのダウンロード中は代替フォントでテキストを表示する設定です。これにより、表示速度の遅延や見えないテキスト（FOIT）の問題を防げます。
  • font-family： 「Permanent Marker」を優先的に使用し、読み込みに失敗した場合のフォールバックとしてcursive（筆記体系フォント）を指定しています。

実行結果

上記のコードをブラウザで開くと、次のような出力になります。見出しも本文も数字も、すべてPermanent Markerの手書き風フォントで表示されていることが確認できます。

WebページでGoogle Fontsを使用する方法をわかりやすく解説

まとめ

Google Fontsを使えば、わずか数行のコードを追加するだけで、Webページのタイポグラフィを大きく向上させられます。日本語サイトであれば「Noto Sans JP」や「Zen Kaku Gothic New」などの日本語対応フォントも豊富に用意されているので、ぜひ活用してみてください。

  1. Google Fonts（グーグルフォント）とは？基本から使い方まで徹底解説

    「Google」という言葉は、もはや私たちの生活に欠かせない存在となっています。何か知りたいことがあれば、まずGoogleで検索するのが当たり前の時代です。Gmail、Google翻訳、Googleドライブなど、世界中の何百万人ものユーザーに愛される多彩なサービスを提供しており、Googleは単なる検索エンジンの枠を超えた存在だと言えるでしょう。 ところで、「Google Fonts」というサービスをご存じでしょうか？実はこの便利なサービスは、ずっと私たちの身近にありながら、意外と知られていないのです。 この記事では、Google Fontsとは何か、その使い方、そして知っておくべきポイントま

  2. Google Duoの使い方完全ガイド！便利な9つの機能とビデオ通話・メッセージ送信の手順を解説

    Google Duo（グーグル デュオ）は、音声通話やビデオ通話を通じて友人や家族とつながることができる魅力的なアプリです。数々の優れた機能を備えており、多くのユーザーから支持を集めてきました。特に、家で過ごす時間が長くなった昨今、孤立感を感じている人にとって心強い存在となっています。ビデオ通話アプリは数多くありますが、Google製ならではの安定性と使いやすさで、群を抜いたパフォーマンスを発揮します。さらに、アプリだけでなくWebプラットフォームとしても利用できるのが魅力です。Zoomミーティングに飽きてしまった方は、少人数の友人や同僚との通話にGoogle Duoを使ってみてはいかがでしょ