こんにちは、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、きれいな見た目で使いやすくて最高ですね。
これからはどんどん積極的に使っていきましょう。
読んでいただき、ありがとうございした！
