【HTML/CSS】日本語フォントあり!「GoogleFont」の使い方をわかりやすく解説!

HTML/CSS

みなさんこんにちは!おさかなです!

今回は「【HTML/CSS】日本語あり!Webフォントの使い方をわかりやすく解説!」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・いい感じのフォントを使いたい方
・Webサイトを作成している方
・HTML/CSSを学習中の方

いい感じのwebフォントにしたい!

おさかな
おさかな

なんか味気ないサイトだな…。
ん~もっといい感じのフォントを使いたい!

ナビまる
ナビまる

それなら、おすすめの「webフォントサービス

があるよ!

参考にした書籍:1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Google Fontsを使ってみよう!

今回はGoogleが提供している無料の「Google Fonts」を使用していきます!
↓まずは公式サイトにアクセス。

Google Fonts
Making the web more beautiful, fast, and open through great typography

トップページはこんな感じです。
この中から使いたいフォントを探していきましょう!

左上の「Language」を押して「Japanese」を選択すれば日本語のフォントも一発で見つかります!(便利~!)

こんな感じで色々出てきました!気になるフォントを見つけたらクリックします。(今回は”Noto Serif JP”を選択してみます!)

太さも色々対応しています!

右上のメーターを動かしてあげると…大きさ(px)を変更した時の文字の形もチェックことができます!

ページをスクロールしてみると、漢字や数字、記号などの表示見本を見ることもできます!(助かる~✨)

さて!使用する太さが決まったら、右側の「Select this style」という青文字をクリックします!

すると、横からウィンドウが表示されるので「Embed」というタブに切り替えます。

グレーボックスの中に、フォントを使用するための「コード」が表示されるので、それぞれコピーして貼り付けていきます!

上のコードは読み込み用のHTMLなので、<head>内に貼り付けます。(よいしょ!)

↓こんな感じ。

下のコードはフォント指定用のCSSなので、フォントを適用したい場所に貼り付けましょう!(今回は<p>タグに指定してみます☆)

↓こんな感じ。

これで設定は完了です!(ふう…💦)
おつかれさまでした…🍹

最後に、フォントがきちんと反映されているか確認していきましょう!

【HTML/CSS】初心者でもかんたんにデバック?「HTML整形ツール」の始め方、使い方とは?【プログラミング】
【HTML/CSS】今回はプチ・デバックもできる「HTML整形ツール」をご紹介!難しい知識は一切必要なし!そして無料!この記事だけで、かんたんに「ソースコード」が整えられます。CSSやJS、PHP版も「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!

表示チェックをしていこう!

webフォント適用前はこんな感じでしたが…?

なんということでしょう!
無事に選択したフォントが表示されています!(やった~!🎊)

【WordPress】ブログで「累乗」を表示する方法をわかりやすく解説!【HTML/CSS】
【WordPress】で「累乗」を表示する方法をわかりやすく解説!【HTML/CSS】を学習中の人にも!ブログ初心者でも安心!この記事だけでまるっと解決できちゃいます!コピペで完了するので難しい知識0「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!

いかがだったでしょうか?

おさかなびではプログラミング学習中の人や、IT初心者に向けて「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

この記事は役に立ちましたか?

タイトルとURLをコピーしました