大学生のプログラミングコミュニティ
GeekSalon(https://bit.ly/2M64LXd) の名古屋メンター吉田です！
デザインで色んな字体を使いたい方へ、Google Fontsの使い方を紹介します！
Google Fontsとは
代表的なWebフォントサービスのひとつで、ダウンロードなどの必要がなく無料で使えるのが大きな利点です。
使い方
こちらのurl(https://fonts.google.com/) からアクセスし、使いたいフォントを選びます(今回はこのLobsterを使います)。
フォントが決まったらクリックし、+select this styleを押すと下図のように右側に出てくるので、Embedでhtmlとcssのコードを確認します。
htmlのコード<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">を自分の開発しているhtmlの<head></head>の間に貼りましょう。GeekSalon受講生の方はapplication.html.erbにあります。
cssのコードfont-family: 'Lobster', cursive;も同様で、適用させたいセレクタに書きましょう。
日本語のフォントを使いたいとき
Lobsterなど、最初から出てくるフォントには日本語が適用されにくい場合もあるので、その場合はLanguageからJapaneseを選択しましょう。
以上で終了です！