Google Fontsの使い方

目次

1. ①：Google Fonts のサイトへアクセス
2. ②：フォントを検索
3. ③：フォントを選択
4. ④：フォントスタイルを選択
5. ⑤：ヘッダーへリンクを追加
6. ⑥：CSSへ「font-family」を追加

①：Google Fontsへアクセス

まずは、Google Fontsの公式サイトへアクセスします。

https://fonts.google.com/

②：フォントを検索

追加したいフォントを検索します。
今回は「Noto Sans」を例に解説してきます。

ページ上部の検索窓に「Noto Sans」と入力します。

③：フォントを選択

「Noto Sans」のキーワードを含むフォントが全て表示されるので、その中から「Noto Sans」をクリックしてフォントを選択します。

④：フォントスタイルを選択

下の方へスクロールしていくとフォントスタイルの一覧が表示されるので、必要なものを追加していきます。
今回は、「Regular 400」「Medium 500」「Bold 700」の3つを追加します。

スタイルを追加するには、右の「Select〜」をクリックします。まずは「Regular 400」を追加します。

「Regular 400」が追加されました。

一旦、右上の×ボタンでフォントスタイルの表示を閉じてから、同じ要領で「Medium 500」「Bold 700」も追加していきます。

全て追加を終えると下図のように「Regular 400」「Medium 500」「Bold 700」の3つが表示されます。

⑤：ヘッダーへリンクを追加

右下にリンク用のコードが生成されるのでコピーします。

コピーしたコードをheadタグ内に貼り付けます。

⑥：CSSへ「font-family」を追加

右下に「font-family」のコードが表示されるので、CSSの適用したい箇所に設定すればGoogleフォントが反映されます。

現場レベルのスキルを身につけたい方へ

現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。

本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。

• 第1章【入門編】プロフィールサイト〜フレックスボックス
• 第2章【初級編】ブランドサイト〜ポジション
• 第3章【中級編】サービスサイト〜複数ページ
• 第4章【上級編】カフェサイト〜複数レイアウト
• 第5章【応用編】ランディングページ〜動きのあるWebサイト
• 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。