LP制作を始めて作成している、ねこらのん（@nekoranon256）です。
今、調べながらしているものは以下のとおりです。
- 画像の中央にテキストを表示する
料金表を作成- 画像クリック→スライドさせる
依頼していた内容から何度か変更があったので変更内容をしていきました。
今日の変更内容はフォントです。
最初はユニバーサルデザインのUDデジタル教科書体の予定でしたが、Googleフォントに変更があったのでGoogleフォントの使い方をまとめていきます。
こんな方におすすめ
- HTML、CSS初心者の方
- Googleフォント初心者の方
今回もサルワカ先生のサイト、【2019年版】Google Fontsの使い方：初心者向けに解説！の記事がわかりやすかったのでこちらを参考に記載しています。
目次
Googleフォントとは
Googleフォントはwebフォントを無料で使用できるサービス。
通常のフォントだとブラウザや端末によって登録されているフォントが違うので、表示されるフォントがバラバラになります。
しかしwebフォントの1つであるGoogleフォントはサーバーに読み込ませてwebサイト上に表示させるので統一されたフォントで表示することが可能。
私のようなPCに疎く完全初心者でも簡単にできるので、おすすめのサービスです。
Googleフォントの使い方
Googleフォントの使い方はとっても簡単。
使い方の流れ
- Googleフォントへ
- 使用したいフォントを選ぶ
- HTMLコードにフォントを読み込んでhead内にコードを貼る
- CSSでfont-familyに使いたいフォント名を記載
- 表示される
この流れで画像付きでまとめていきます。
使い方①Googleフォントへ
画像をクリックするとGoogleフォントの公式サイトへ飛びます。
Googleフォントサイトへいくと、上記の画像が表示されます。
フォントが決まっている場合は上の赤枠の検索窓で検索し、使い方③へ飛んでください。
使い方②使用したいフォントを選ぶ
フォントが決まっていない場合は上記の画像の
- Categories
- Language
- Font properties
からフォントスタイルにチェックして探すことができます。
Langageでは以下の内容が表示されます。
日本語も少ないですが2020年8月現在ありました。
使い方③HTMLコードにフォントを読み込んでhead内にコードを貼る
使いたいフォントが決まったら上記の画像の赤枠の部分をクリック。
すると上記の画像の赤枠のように変化します。
上記の画像の赤枠部分に赤丸が追加されるので、赤枠部分をクリックしてください。
クリックすると上記のようにHTMLが表示されるので、head内に記載します。
使い方④CSSでfont-familyに使いたいフォント名を記載
次にCSSでfont-familyに使い方③で表示されたコードをコピーしてbodyに指定します。
使い方⑤表示される
Live Severなどで確認すると指定したフォントが表示されていることを確認！
あとはエックスサーバーなどのサーバーでwebフォントの設定をします。
おわりに
モリサワの場合は依頼主に登録してもらうなど手間がかかりますが、Googleフォントはこちらが検索し設定するだけなので非常に簡単でした！
もりけん塾（@terrace_tech）
Thanks：もりけんさん