Google Fontsとは、Googleが無料提供しているWebフォントです。商用も使えますし、2019年から日本語フォントが追加されました。部分的に使用するだけで、おしゃれな印象になりますね。ただ、あまり使用するとサイトの表示スピードが低下するので、注意が必要です。
朗報です！
2021年：日本語フォントが大幅に追加されました。個性的な書体が多数あり便利です。
INDEX
Webフォントって何？
PCやスマホには、それぞれ異なるフォントがインストールされています。サイトでそれらに無いフォントが使われていた場合、代替えフォントが使われます。デザイン性を統一する際にWebフォントを使う事が出来ます。サーバー上のフォントにリンクして、それを参照する仕組みです。
Google Fontsの設定
- 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;}
コメント