CSSでウェブサイトのフォントの指定をする方法【font-familyの設定】

CSSのfont-familyを使ってフォントを指定するにゃ。デフォルトだとブラウザによってゴシック体だったり明朝体だったりしちゃうにゃ！

font-familyプロパティの基本書式

CSSの文字フォントの種類を指定するには、「font-family」プロパティを記述します。

body { font-family: "フォントファミリー名",総称ファミリー名; }

フォント記述の注意点まとめ

詳しくみていきましょう

font-familyが無指定だった場合

　font-familyの指定しなかった場合は、OS・ブラウザごとのデフォルトフォントが適用されます。

　多くのブラウザは、ゴシック体ですが、macOSやiOS（iPhone）の標準ブラウザSafariだけは、デフォルトが明朝体になります。

にゃんこ1

最低限、総称フォントは指定しておく事をお勧めにゃ。

デバイスフォントとは

パソコン内にデフォルトで導入されているフォントです。

（例）

にゃんこ2

Windowsにはメイリオあるけど、macOSにはないにゃ。

にゃんこ1

macOSはヒラギノあるけど、Windowsではないにゃ。

Webフォントとは

サーバー上に配置されているフォントデータをHTMLで読み込んで利用できるフォント。サーバーからデータを取得しているので、どの端末でも同じフォントを表示できます。

「フォントファミリー名」と「総称フォント名」

フォントを指定するには「フォントファミリー名」と「総称フォント名」があります。

総称フォント

該当するフォントが自動的に利用され、フォントの種類のみ限定して、具体的なフォントはデバイスに依存する指定方法が総称フォントになります。font-familyの最後尾に指定することで表示するフォントの種類を限定する役割として使うことが多いです。

body {
  font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;
}

「総称フォント名」

フォントファミリー

デバイスごとのフォントを複数指定することで、ユーザーのパソコンで意図しないフォントが表示されるのを防げます。総称フォントと違って具体的にフォントを指定する方法で、利用しているデバイスに存在しない場合は別のフォントが代用されます。（最初に書いたフォントから優先的に順番に表示されます。）

フォントファミリー名を指定するときは、下記のようにダブルクォーテーションかシングルクォーテーションでフォント名を囲い、カンマで区切ります。

body {
  font-family: 'ＭＳ Ｐゴシック', 'Hiragino Kaku Gothic ProN', sans-serif;
}

英字表記と日本語表記で使用するフォントを使い分けたいときは、英字表記に指定する欧文フォントを日本語フォントよりも前に指定します。（すべてのテキストを日本語フォントで表示したい場合には、欧文フォントは指定しない）

代表的な「フォントファミリー名」

WindowsやMacなどOSごとにフォント名を指定する。

ゴシック体

• MSゴシック
• MS Pゴシック
• メイリオ
• Meiryo UI
• 游ゴシック
• YU Gothic UI
• ヒラギノ角ゴシック（Hiragino Sans）
• ヒラギノ角ゴシック ProN（Pro）
• ヒラギノ丸ゴシック ProN（Pro）
• Osaka

明朝体

• MS 明朝
• MS P明朝
• 游明朝
• ヒラギノ明朝 ProN（Pro）

欧文フォント

• Arial
• Arial Black
• Helvetica
• Helvetica Neue
• Segoe UI
• Verdana
• San Francisco
• Times New Roman

おすすめ設定

ゴシック

font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;

明朝

font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;