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

2024年2月18日

ども、しゅうです。

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

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

と困っていたら、

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

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

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

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

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

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

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

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

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

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

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

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

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

複数指定する意味は、

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

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

ということです。

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

詳しくは↓

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