Google Fontsを使ってみよう!

記事
IT・テクノロジー
Googleはフォントも提供してるのをご存知でしたか?WebサイトにGoogle Fontsはいかがでしょうか?
今回はGoogle Fontsを一緒に使ってみましょう!



Google Fontsにアクセス!

▼サイトはこちら
https:// fonts.google.com/

1828.gif


▼ダークモードがお好みの方は下記アイコンをクリックすると変更できます
1833.gif


▼Languageタブから日本語(Japanese)を選びます
1839.gif


▼日本語が出ました
1840.gif


▼今回はこちらのRampart Oneを使ってみることにします。
1937.gif


▼クリックすると下記のページになります
1941.gif

Stylesのところで、サンプル文章を入れたり大きさを調整して、
その下で見栄えを確認できます。


▼このフォントを使うことに決めたら、右側のSelect +を押します
1944.gif


そしたらフォントが追加されますので、右上のアイコン(View selected families)をクリックして選んだフォントを見ます。
1952.gif
↑追加されたフォントは、Select +の部分が、Remove -になります。


すると、今選んでるフォントが出てきます。もっと他のフォントも使いたかったら再度選択して追加していきます。

今回はこのフォントだけでいいので、<link>のコードをコピーします。
▼コピーアイコンをクリックしてコピー
1953.gif


▼<head>タグ内にコピペします
2005.gif


▼次に、先ほどのコードの下にある、CSSをコピーします
2013.gif


今回は、クラス名p01とついたpタグにスタイルを当てるとします。
▼htmlファイル(今回はCSSをhtml内に書いた例です)
2015.gif


▼ブラウザで表示されました!
2023.gif




できましたか?
今回は以上になります。
今後もこのようにちょっとしたお役立ち情報をお伝えして参りますので、楽しみにしていてくださいね^^
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す