こんにちは、yassanです。
今回は、3分で分かるGoogle Fontsの使い方【初心者向け】をご紹介いたします。
WebページやWebアプリケーションを作る際に、標準のフォントだとどうしても味気がないですよね。
そんなときに、Google Fontsを使うと、WebページやWebアプリケーションの外観がとてもいい感じになります。
Google Fonts とは?【概要】
Google FontsはあのGoogle先生が提供しているサービスです。
まずは、こちらの公式ページをご覧ください。

様々なフォントがありますね。
なんと、日本語もいくつかある様子です。
Aboutを見てみると、2020年3月現在は135以上の言語で使用されるフォントが用意されてるみたいです。
これらのフォントは無料で使うことができます。
さすがGoogle先生。
Google Fontsを使ってみよう【使い方】
では、実際にGoogle Fontsを使ってみましょう。
難しくありません。めっちゃ簡単です。
先程のページから使いたいフォントを選びましょう。
これだというのが決まったら右上の+ボタンをクリック。

このようなダイアログが出てくるのでクリックして拡大します。
EMBED > STANDARD の中のコードをコピーします。
そしたら、それをhtmlのコードに貼り付けます。

今度は、EMBED > @IMPORT の中のコードと、Specify in CSSをコピーします。

そしたら、それをcssのコードに貼り付けます。

以上です。こんな感じになります。

beforeはこんな感じ。全然違いますね。

まとめ
いかがでしたでしょうか。
Google Fonts、きれいな見た目で使いやすくて最高ですね。
これからはどんどん積極的に使っていきましょう。
読んでいただき、ありがとうございした!