CSSで指定できる 基本的なフォント名と 実際のフォント画像の一覧! CSSでフォント指定するなら コレで解決!

この記事は広告・PRを含みます プログラミング

CSSでフォント指定するならコレ!html・CSSで使える基本的なフォント一覧・使い方リンクまとめ

ども、しゅうです。

自分でプログラミンを書いていて、CSSでフォントを指定するとき、

フォント名だけじゃどんなフォントかわからん!!

と困っていたら、

フォント名・総称フォントファミリー名と、その実際のフォントの画像を一覧にしてくれてるサイトを見つけたので共有しておきます。

ついでに、WebフォントやGoogle Fontsの使い方などのリンクもまとめてます。

フォントファミリー一覧サイトリンク

CSS・htmlで指定できるフォント一覧:見本付き

フォント名でどんなフォントか確認できます↓

css・htmlで指定できるフォント一覧

無料日本語フリーフォント投稿サイト

ついでに、ダウンロードフォントですが、こんなサイトも見つけました↓

無料で使える!日本語フリーフォント投稿サイト - FONT FREE

Webフォントとは?

さらに、ダウンロードなしでデバイス問わず表示できるWebフォントの紹介記事は↓

Webフォントの使い方も解説してくれてます。

【CSS初心者】無料で使える!おしゃれ&かわいいWebフォントおすすめ9選

天下の Google Fonts もちろん完全無料(大量)

天下のGoogle様の完全無料Webフォント(大量)↓

使い方は、Bootstrapのアイコンなんかと同じ感じです。
Google Fonts にもアイコンあります。

Google Fonts:公式

Google Fonts(グーグルフォント)の使い方!おすすめの日本語フォントやペライチでの利用方法もご紹介

CSSでのフォントファミリーの指定方法:コードの書き方

/* フォントファミリー指定方法
通常cssでbodyに一括指定
要素ごとに個別指定も可 */

body {
  font-family: 'Courier New', Courier, monospace;
}

「 , 」で区切って複数指定できます。

左に書いたものから優先して適用されます。

複数指定する意味は、

指定したフォントが読者のスマホやPCなどのブラウザに入っていなかった場合、ひとつ右の次の候補のフォントが適用される、、、

ひとつしか指定していなくて、そのフォントが入っていなかった場合、全くイメージの違う代替フォントで表示されるのを防ぐ、、、

ということです。

なので、通常は、似たテイストのフォントを複数指定します。

詳しくは↓

【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例

読んでいただいて、ありがとうございます。
m(_ _)m

-プログラミング
-