Googleはフォントも提供してるのをご存知でしたか?WebサイトにGoogle Fontsはいかがでしょうか?
今回はGoogle Fontsを一緒に使ってみましょう!
Google Fontsにアクセス!
▼サイトはこちら
https:// fonts.google.com/
▼ダークモードがお好みの方は下記アイコンをクリックすると変更できます
▼Languageタブから日本語(Japanese)を選びます
▼日本語が出ました
▼今回はこちらのRampart Oneを使ってみることにします。
▼クリックすると下記のページになります
Stylesのところで、サンプル文章を入れたり大きさを調整して、
その下で見栄えを確認できます。
▼このフォントを使うことに決めたら、右側のSelect +を押します
そしたらフォントが追加されますので、右上のアイコン(View selected families)をクリックして選んだフォントを見ます。
↑追加されたフォントは、Select +の部分が、Remove -になります。
すると、今選んでるフォントが出てきます。もっと他のフォントも使いたかったら再度選択して追加していきます。
今回はこのフォントだけでいいので、<link>のコードをコピーします。
▼コピーアイコンをクリックしてコピー
▼<head>タグ内にコピペします
▼次に、先ほどのコードの下にある、CSSをコピーします
今回は、クラス名p01とついたpタグにスタイルを当てるとします。
▼htmlファイル(今回はCSSをhtml内に書いた例です)
▼ブラウザで表示されました!
できましたか?
今回は以上になります。
今後もこのようにちょっとしたお役立ち情報をお伝えして参りますので、楽しみにしていてくださいね^^