Google Fontsとは、Googleが無料提供しているWebフォントです。商用も使えますし、2019年から日本語フォントが追加されました。久しぶりに確認した所、画面が変わっていたので、使い方をシェアします。
Webフォントって何？
PCやスマホには、それぞれ異なるフォントがインストールされています。サイトでそれらに無いフォントが使われていた場合、代替えフォントが使われます。デザイン性を統一する際にWebフォントを使う事が出来ます。サーバー上のフォントにリンクして、それを参照する仕組みです。
Google Fontsの設定
https://fonts.google.com/ にアクセス。
- 1:言語を選択 [Japanese]
- 2:比べたい文言を入力するとイメージしやすいです。
- 3:気に入ったフォントをクリック。
- 4-1:気に入ったフォントスタイルを選び[Select this style]をクリックして登録する方法と、
4-2:ページをスクロールして [+]をクリックして登録する方法。どちらもStyleを修正出来ます。 - 5:登録内容が確認できます。ショッピングカートの様な感じ。複数登録可能です。
6：[Enbed]をクリックしてコードを入手します。
Link のコード（↓は例）を<head>の中に記載する
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">htmlに記載しなくても@importにあるコードをCSSファイルの中に書いてもOKです。
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');CSS rules to specify families のコードはCSSファイルに書きます。h1に適応する場合は、こんな感じ。
h1{font-family: 'Roboto', sans-serif;}
