まずはこちらをご覧ください。
同じ文章でもフォントが違うだけで印象がだいぶ違うと思います。
ブログを見ていてなんとなく古臭いと感じることがないでしょうか？
ブログの色も重要ですがフォントも同じくらい重要な要素だったりします。
以下はこのサイトのページ全体のフォントをCSSで定義しています。
ページ全体の基本のフォントをbody（【第３回】ブログのデザインを変更してみる（実践編）参照）で定義しています。
ほとんどのサイトで同じようにbodyに定義していると思うので変更したい場合はここを変更するとページのフォントが変わりますよ✨
body {
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
font-familyは複数のフォントを指定できます。これはデバイスによって入っているフォントが違うからです。
Macには入っているけどWindowsには入っていないとか。モバイル端末のことも考えないといけません。
前から順番に見ていき入っているフォントが優先的に表示されるフォントとして採用されます。
詳しい説明はこちら見ていただければ💦
（また丸投げです）
これで全体のフォントを定義しましたが、例えばタイトルだけ変えたいとか個別のパーツ毎に変えたい場合はその部分のCSSにフォントを定義すればその部分だけ変更できます。
このサイトではブログタイトルが共通のフォントと違います。
おまけ：Google Fonts
フォントはOSに入っているものが表示されると先ほどいいましたがWEBフォントというものがあります。これは文字通りWebページを開くときネットワーク上のフォントを呼び出し表示するものです。
Webページの読み込みと同時に、ネットワーク上にあるフォントデータをダウンロードするため、どのデバイスで見ても制作サイドが意図したフォントで表示することが可能になります。
全部WEBフォントにすればいいじゃん？って思うかもしれませんが当然フォントデータをダウンロードするので通信料は多くなります。
あと日本語対応しているか注意してください。
このサイトではタイトルがWEBフォント利用しています✨
Google Fonts
Google Fonts + Japanese • Google Fonts + 日本語
利用するにはこんな感じでCSSを読み込みます。（head部でね）
<head>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
</head>
あとは通常通りCSSのfont-familyに書いて利用できます。
If you can dream it, you can do it.
If you can dream it, you can do it.
If you can dream it, you can do it.
If you can dream it, you can do it.
If you can dream it, you can do it.
If you can dream it, you can do it.
If you can dream it, you can do it.
If you can dream it, you can do it.
次回は素材探し編（仮）に続く予定💦
