みなさんこんにちは！おさかなです！
今回は「【HTML/CSS】日本語あり！Webフォントの使い方をわかりやすく解説！」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・いい感じのフォントを使いたい方
・Webサイトを作成している方
・HTML/CSSを学習中の方
いい感じのwebフォントにしたい！
なんか味気ないサイトだな…。
ん～もっといい感じのフォントを使いたい！
それなら、おすすめの「webフォントサービス」
があるよ！
参考にした書籍：1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
Google Fontsを使ってみよう！
今回はGoogleが提供している無料の「Google Fonts」を使用していきます！
↓まずは公式サイトにアクセス。
トップページはこんな感じです。
この中から使いたいフォントを探していきましょう！
左上の「Language」を押して「Japanese」を選択すれば日本語のフォントも一発で見つかります！(便利～！)
こんな感じで色々出てきました！気になるフォントを見つけたらクリックします。(今回は”Noto Serif JP”を選択してみます！)
太さも色々対応しています！
右上のメーターを動かしてあげると…大きさ(px)を変更した時の文字の形もチェックことができます！
ページをスクロールしてみると、漢字や数字、記号などの表示見本を見ることもできます！(助かる～✨)
さて！使用する太さが決まったら、右側の「Select this style」という青文字をクリックします！
すると、横からウィンドウが表示されるので「Embed」というタブに切り替えます。
グレーボックスの中に、フォントを使用するための「コード」が表示されるので、それぞれコピーして貼り付けていきます！
上のコードは読み込み用のHTMLなので、<head>内に貼り付けます。(よいしょ！)
↓こんな感じ。
下のコードはフォント指定用のCSSなので、フォントを適用したい場所に貼り付けましょう！(今回は<p>タグに指定してみます☆)
↓こんな感じ。
これで設定は完了です！(ふう…💦)
おつかれさまでした…🍹
最後に、フォントがきちんと反映されているか確認していきましょう！
表示チェックをしていこう！
webフォント適用前はこんな感じでしたが…？
なんということでしょう！
無事に選択したフォントが表示されています！(やった～！🎊)
いかがだったでしょうか？
おさかなびではプログラミング学習中の人や、IT初心者に向けて「デジタル時代を楽しむためのミニ知識」をご紹介しています！
ぜひ他のページも覗いてみてください…！
それでは今回はこの辺で！
ここまで読んでくださり、ありがとうございました！
おさかなでした！
