【もりけん塾38日目】Googleフォントの使い方画像付きで解説【完全初心者】

LP制作を始めて作成している、ねこらのん（@nekoranon256）です。

今、調べながらしているものは以下のとおりです。

依頼していた内容から何度か変更があったので変更内容をしていきました。

今日の変更内容はフォントです。

最初はユニバーサルデザインのUDデジタル教科書体の予定でしたが、Googleフォントに変更があったのでGoogleフォントの使い方をまとめていきます。

今回もサルワカ先生のサイト、【2019年版】Google Fontsの使い方：初心者向けに解説！の記事がわかりやすかったのでこちらを参考に記載しています。

Googleフォントとは

Googleフォントはwebフォントを無料で使用できるサービス。

通常のフォントだとブラウザや端末によって登録されているフォントが違うので、表示されるフォントがバラバラになります。

しかしwebフォントの1つであるGoogleフォントはサーバーに読み込ませてwebサイト上に表示させるので統一されたフォントで表示することが可能。

私のようなPCに疎く完全初心者でも簡単にできるので、おすすめのサービスです。

Googleフォントへ

Googleフォントの使い方

Googleフォントの使い方はとっても簡単。

この流れで画像付きでまとめていきます。

使い方①Googleフォントへ

画像をクリックするとGoogleフォントの公式サイトへ飛びます。

Googleフォントサイトへいくと、上記の画像が表示されます。

フォントが決まっている場合は上の赤枠の検索窓で検索し、使い方③へ飛んでください。

使い方②使用したいフォントを選ぶ

フォントが決まっていない場合は上記の画像の

からフォントスタイルにチェックして探すことができます。

Langageでは以下の内容が表示されます。

日本語も少ないですが2020年8月現在ありました。

使い方③HTMLコードにフォントを読み込んでhead内にコードを貼る

使いたいフォントが決まったら上記の画像の赤枠の部分をクリック。

すると上記の画像の赤枠のように変化します。

上記の画像の赤枠部分に赤丸が追加されるので、赤枠部分をクリックしてください。

クリックすると上記のようにHTMLが表示されるので、head内に記載します。

使い方④CSSでfont-familyに使いたいフォント名を記載

次にCSSでfont-familyに使い方③で表示されたコードをコピーしてbodyに指定します。

使い方⑤表示される

Live Severなどで確認すると指定したフォントが表示されていることを確認！

あとはエックスサーバーなどのサーバーでwebフォントの設定をします。

エックスサーバーのwebフォント設定

おわりに

モリサワの場合は依頼主に登録してもらうなど手間がかかりますが、Googleフォントはこちらが検索し設定するだけなので非常に簡単でした！

もりけん塾（@terrace_tech）

Thanks：もりけんさん

もりけんさんの『武骨日記』へ