cssのfont-familyでフォントの種類を指定する方法

フォントの種類を指定

cssのfont-familyプロパティを使ったフォントの指定方法の紹介です!

ホームページやブログを制作したはいいけど、フォント(文字)が微妙・・・って思う事ってありますよね。 そんな時はcssのfont-familyプロパティを使って、ホームページやブログに表示する文字の種類を変えちゃいましょう!

このページではフォントの種類の指定方法や指定できるフォントの種類などについて紹介します!

目次

font-family(フォントファミリー)プロパティの使い方

font-familyプロパティは、フォントの種類を指定する時に使います。

フォントを指定する時は「,」カンマで区切る事で複数のフォントを指定できます。 複数のフォントを指定した場合は、左に記述したフォントほど優先され、利用可能であれば適用されます。

まあつまり閲覧者の環境によって表示できるフォントが変わるので、自分のイメージしたフォントに近づけるために複数記述するというわけです。 簡単にいうと指定したフォントが表示されない場合に備えて、予備のフォントを指定しておくということです。

プロパティ 意味
font-family:フォント名もしくはキーワード; フォントの種類を指定する

フォント名で指定する方法

フォント名を指定する方法は「MS 明朝」「MS ゴシック」のようにフォント名で指定する方法、「serif」のようにキーワードで指定する方法の2種類あります。

フォント名で指定する場合は「'MS 明朝'」のように「'」シングルクォーテーション、または「"」ダブルクォーテーションで囲む必要があります。 ちなみにフォント名にスペースが空いている場合のみ、囲むようにしましょう。

例えば「MS」と「明朝」の間にスペースが空いてますよね。こんな時は囲みましょう。

.example{
  font-family: 'MS 明朝', serif;
}
表示例
MS 明朝(表示例)

指定できるフォント名の種類は、下のページで紹介しています。

キーワード(総称ファミリー)で指定する方法

キーワードでフォントを指定する場合は、「"」「'」といった引用符は必要ありません キーワード(総称ファミリー)で指定できるフォントの種類は下のようになってます。

キーワード(総称ファミリー) 表示されるフォント
sans-serif ゴシック系フォント
serif 明朝系フォント
cursive 筆記体・草書体フォント
fantasy 装飾的フォント
monospace 等幅フォント
.example{font-family: sans-serif;}
.example{font-family: serif;}
.example{font-family: cursive;}
.example{font-family: fantasy;}
.example{font-family: monospace;}
表示例
sans-serif (ゴシック系フォント)
serif(明朝系フォント)
cursive(筆記体・草書体)
fantasy (装飾的フォント)
monospace(等幅フォント)

font-familyプロパティの注意点

font-familyプロパティでフォントを指定する際の注意点が一つあります。 それは指定したフォントが閲覧者のpcに入っていないと表示されないということ。

サイトの制作者でなく閲覧者のpcに指定したフォントが入ってないと、もちろんフォントは表示されません。 なので指定したフォントが表示されない場合に備えて、複数のフォントを指定しておきましょうね。

.example{
  font-family: 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}

上の例の場合だと、候補1が「游ゴシック体」候補2が「'Yu Gothic'」候補3が「YuGothic」・・・。 というような感じで続いていきます。

候補1が表示されない場合は、候補2が表示されます。 2がだめなら3・・・・というようになるので、必ず複数のフォントを指定しましょう!

あとfont-familyを記述していく際の細かい注意点などを、ちょっと説明していきますね。

英語フォント(欧文フォント)から指定

テキストの日本語の部分と英語の部分をそれぞれ違うフォントにしたい!って時ありますよね。 そういう時は、font-familyプロパティに英語フォントから先に記述していきます。

body{
     font-family: Helvetica , "游ゴシック体" , "Yu Gothic" , sans-serif;
}

上のように英語フォント(Helvetica)を日本語フォント(游ゴシック体)より先に指定する事で、テキストの英語部分は「Helvetica」、日本語部分は「游ゴシック体」で表示されるようになります。 ちなみに日本語フォントを先に指定した場合は、テキストの英語・日本語の部分どちらも日本語フォント(上の場合で言えば’游ゴシック体’)で表示されます。

なんでそうなるかというと、日本語フォントには半角英数字も含まれているから。 つまり日本語フォントだけで英語・日本語の部分どちらも対応しちゃうってことです。

なので日本語と英語でフォントを分けて指定したい時は、先に英語フォントから記述しましょう!

pcにインストールされているフォントを把握しておく

pcのos(ソフトウェア)によってインストールされているフォントの種類が違います

例えばウィンドウズ8.1から搭載されたフォントもあれば、ウィンドウズ7から搭載されたフォントもあります。 なのでどのフォントを優先させるか決めるためにも、どのosから搭載されているのかを知っておいた方が良いです。

フォント名 搭載されているos
メイリオ Windows Vista以降
Meiryo UI Windows 7以降
游ゴシック Windows 8.1以降
MS UI Gothic Windows 98以降
MS Pゴシック Windows 95以降
MS ゴシック Windows 3.1以降
MS P明朝 Windows 95以降
MS 明朝 Windows 3.1以降
游明朝 Windows 8.1以降
游ゴシック体 Macintosh OS X 10.9以降
游明朝体 Macintosh OS X 10.9以降
ヒラギノ角ゴ Pro W3 Macintosh OS X
ヒラギノ角ゴ ProN W3 Macintosh OS X 10.5以降
HiraMinProN-W6 iOS6以降
ヒラギノ角ゴ Pro W6 Macintosh OS X
HiraKakuProN-W3 iOS
ヒラギノ角ゴ ProN W6 Macintosh OS X 10.5以降
ヒラギノ角ゴ Std W8 Macintosh OS X
ヒラギノ角ゴ StdN W8 Macintosh OS X 10.5以降
ヒラギノ丸ゴ Pro W4 Macintosh OS X
ヒラギノ丸ゴ ProN W4 Macintosh OS X 10.5以降
ヒラギノ明朝 Pro W3 Macintosh OS X
ヒラギノ明朝 ProN W3 Macintosh OS X 10.5以降
ヒラギノ明朝 Pro W6 Macintosh OS X
ヒラギノ明朝 ProN W6 Macintosh OS X 10.5以降
HiraMinProN-W3 iOS6以降
Osaka Macintosh OS X
Osaka-等幅 Macintosh OS X
Droid Sans Android
Roboto Android4以降

総称フォントファミリーを記述しておこう

font-familyプロパティでフォントを指定する時は、最後に総称フォントファミリーを記述しましょう! 総称フォントファミリーというのは、下のようなものになります。

総称フォントファミリー名 表示されるフォント
sans-serif ゴシック系フォント
serif 明朝系フォント
cursive 筆記体・草書体フォント
fantasy 装飾的フォント
monospace 等幅フォント
body{
     font-family: Helvetica , "游ゴシック体" , "Yu Gothic" , sans-serif;
}

上のような感じで一番最後に総称フォントファミリーを記述しときましょう。 こうする事で指定したフォントが表示されなくても、同じような系統のフォントを表示することができます。

上でいえば「游ゴシック体・Yu Gothic」はゴシック系のフォントですよね。 そして総称ファミリーの「sans-serif」もゴシック系のフォントです。 なので「游ゴシック体・Yu Gothic」が万が一表示されなくても、指定したフォントにある程度近い形のフォントが表示できるわけです。

注意点は大体こんな感じです!!

font-familyを変えるだけでホームページやブログの印象がかなり変わるので、ぜひ色々試してみて下さいね。