CSS | font-family | 文字の種類（フォント）

font-family(フォントファミリー)は文字の種類を指定するためのCSSプロパティです。

フォントファミリー一覧

様々(さまざま)なフォントファミリーを紹介します。

汎用フォントファミリー
共通のフォントファミリー
英語のフォントファミリー
- 英語 - Windows 11のみ
- 英語 - Apple製品のみ
日本語のフォントファミリー
- 日本語 - Windows 11のみ
- 日本語 - Apple製品のみ

'American Typewriter'Arial 'Arial Black''Arial Rounded MT Bold'Bahnschrift Baskerville 'Bebas Neue'BIZ UDゴシック by モリサワ BIZ UD明朝 by モリサワ BIZ UDPゴシック by モリサワ BIZ UDP明朝 by モリサワ Calibri Cambria 'Cambria Math'Candara Carlito 'Cascadia Code''Cascadia Mono'Chalkduster 'Charter Black'Cochin 'Comic Sans MS'Consolas Constantia Copperplate Corbel Courier 'Courier New'cursive 'Dear Joe Four'Didot Druk 'Druk Text''Druk Wide'emoji fangsong fantasy 'Franklin Gothic Medium'Gabriola Gadugi Georgia 'Gill Sans'Webフォント Helvetica 'Helvetica Neue'ヒラギノ角ゴ ProN W3 ヒラギノ角ゴ ProN W6 ヒラギノ角ゴ Pro W3 ヒラギノ角ゴ Pro W6 ヒラギノ丸ゴ ProN W4 ヒラギノ丸ゴ Pro W4 ヒラギノ明朝 ProN W3 ヒラギノ明朝 ProN W6 ヒラギノ明朝 Pro W3 ヒラギノ明朝 Pro W6 ヒラギノ Sans W3 ヒラギノ Sans W6 ヒラギノ Sans W7 'Hoefler Text'Impact 'Ink Free''Journal Sans New Inline''Lucida Console''Lucida Sans Unicode'math メイリオメイリオ UI 'Microsoft Sans Serif'monospace ＭＳゴシックＭＳ明朝ＭＳＰゴシックＭＳＰ明朝ＭＳ UIゴシック Webフォント Webフォント 'Palatino Linotype'Papyrus Webフォント Rockwell sans-serif Scheme 'Segoe Print''Segoe Script''Segoe UI'Seravek serif SignPainter-HouseScript 'Snell Roundhand'STIXGeneral-Bold STIXGeneral-BoldItalic STIXGeneral-Italic STIXGeneral-Regular Sylfaen system-ui Tahoma 'The Hand Serif Semibold'Thonburi Times 'Times New Roman'Webフォント 'Trebuchet MS'ui-monospace ui-rounded ui-sans-serif ui-serif Verdana 游ゴシック游ゴシック Medium 游ゴシック UI Light 游ゴシック UI Semibold 游明朝游明朝 Demibold 游明朝 Light Zapfino

以降の表の見方を説明します。

左の項目はフォントファミリーの名前です。CSSに指定する場合に使います。
中央の項目はそのフォントファミリーでの表示結果です。画面の右上に「Font 文字」と表示されているテキストボックスが見えますが、そこの内容を変更するとこの表示結果も変更されます。下に朱色の文字が見えている場合は「そのフォントファミリーはご利用のコンピューターにインストールされていない」ということを意味します。
右の項目は標準でインストールされているOS(Apple、Windows、Android)を表します。monospaceと書かれているものは等幅フォントです。

汎用

W3Cで規定されている汎用フォントファミリーです。 CSS3まではserifからfantasyまでの5種類が規定されています。 CSS4からsystem-ui以降が追加される見込みですが、多くのシステムでは対応していません。

serif(セリフ体)は(日本語で言うところの)明朝体、sans-serif(サンセリフ体)は(日本語で言うところの)ゴシック体になります。 monospaceは横幅が一定な等幅フォントでありプログラミングコードを表示する場合などに使います。 cursiveは筆記体、fantasyはかわいい系の文字であるが、多用するとウザいでしょう。

後述しますがフォントファミリーを指定する場合、最後に汎用フォントファミリーを指定しておいた方が良いでしょう。

`serif`	serif serif
`sans-serif`	sans-serif sans-serif
`monospace`	monospace monospace	monospace
`cursive`	cursive cursive
`fantasy`	fantasy fantasy
`system-ui`	system-ui system-ui
`ui-serif`	ui-serif ui-serif
`ui-sans-serif`	ui-sans-serif ui-sans-serif
`ui-monospace`	ui-monospace ui-monospace
`ui-rounded`	ui-rounded ui-rounded
`emoji`	emoji emoji
`math`	math math
`fangsong`	fangsong fangsong

共通

Apple、Windows、Androidで共通にインストールされているフォントファミリーを列挙しました。

`Georgia`	Georgia Georgia
`'Times New Roman'`	'Times New Roman' 'Times New Roman'
`Times`	Times Times
`Rockwell`	Rockwell Rockwell
`Baskerville`	Baskerville Baskerville
`Verdana`	Verdana Verdana
`Arial`	Arial Arial
`Helvetica`	Helvetica Helvetica
`Tahoma`	Tahoma Tahoma
`'Trebuchet MS'`	'Trebuchet MS' 'Trebuchet MS'
`'Courier New'`	'Courier New' 'Courier New'	monospace
`Courier`	Courier Courier	monospace
`Papyrus`	Papyrus Papyrus

英語(Windows)

Windows 11に標準でインストールされている英語フォントです。通常、Apple製品やAndroidにはインストールされていません。

`'Arial Black'`	'Arial Black' 'Arial Black'
`Bahnschrift`	Bahnschrift Bahnschrift
`Calibri`	Calibri Calibri
`Cambria`	Cambria Cambria
`'Cambria Math'`	'Cambria Math' 'Cambria Math'
`Candara`	Candara Candara
`'Cascadia Code'`	'Cascadia Code' 'Cascadia Code'	monospace
`'Cascadia Mono'`	'Cascadia Mono' 'Cascadia Mono'	monospace
`'Comic Sans MS'`	'Comic Sans MS' 'Comic Sans MS'
`Consolas`	Consolas Consolas	monospace
`Constantia`	Constantia Constantia
`Corbel`	Corbel Corbel
`'Franklin Gothic Medium'`	'Franklin Gothic Medium' 'Franklin Gothic Medium'
`Gabriola`	Gabriola Gabriola
`Gadugi`	Gadugi Gadugi
`Impact`	Impact Impact
`'Ink Free'`	'Ink Free' 'Ink Free'
`'Lucida Console'`	'Lucida Console' 'Lucida Console'	monospace
`'Lucida Sans Unicode'`	'Lucida Sans Unicode' 'Lucida Sans Unicode'
`'Microsoft Sans Serif'`	'Microsoft Sans Serif' 'Microsoft Sans Serif'
`'Palatino Linotype'`	'Palatino Linotype' 'Palatino Linotype'
`'Segoe Print'`	'Segoe Print' 'Segoe Print'
`'Segoe Script'`	'Segoe Script' 'Segoe Script'
`'Segoe UI'`	'Segoe UI' 'Segoe UI'
`Sylfaen`	Sylfaen Sylfaen

英語(Apple)

iOS(16)、iPadOS(16)、macOS(Ventura)に共通でインストールされている英語フォントです。通常、WindowsやAndroidにはインストールされていません。

`'American Typewriter'`	'American Typewriter' 'American Typewriter'
`'Arial Rounded MT Bold'`	'Arial Rounded MT Bold' 'Arial Rounded MT Bold'
`'Bebas Neue'`	'Bebas Neue' 'Bebas Neue'
`Carlito`	Carlito Carlito
`Chalkduster`	Chalkduster Chalkduster
`'Charter Black'`	'Charter Black' 'Charter Black'
`Cochin`	Cochin Cochin
`Copperplate`	Copperplate Copperplate
`'Dear Joe Four'`	'Dear Joe Four' 'Dear Joe Four'
`Didot`	Didot Didot
`Druk`	Druk Druk
`'Druk Text'`	'Druk Text' 'Druk Text'
`'Druk Wide'`	'Druk Wide' 'Druk Wide'
`'Gill Sans'`	'Gill Sans' 'Gill Sans'
`'Helvetica Neue'`	'Helvetica Neue' 'Helvetica Neue'
`'Hoefler Text'`	'Hoefler Text' 'Hoefler Text'
`'Journal Sans New Inline'`	'Journal Sans New Inline' 'Journal Sans New Inline'
`Scheme`	Scheme Scheme
`Seravek`	Seravek Seravek
`SignPainter-HouseScript`	SignPainter-HouseScript SignPainter-HouseScript
`'Snell Roundhand'`	'Snell Roundhand' 'Snell Roundhand'
`STIXGeneral-Regular`	STIXGeneral-Regular STIXGeneral-Regular
`STIXGeneral-Bold`	STIXGeneral-Bold STIXGeneral-Bold
`STIXGeneral-BoldItalic`	STIXGeneral-BoldItalic STIXGeneral-BoldItalic
`STIXGeneral-Italic`	STIXGeneral-Italic STIXGeneral-Italic
`'The Hand Serif Semibold'`	'The Hand Serif Semibold' 'The Hand Serif Semibold'
`Thonburi`	Thonburi Thonburi
`Zapfino`	Zapfino Zapfino

日本語(Windows)

Windows 11に標準でインストールされている日本語フォントです。通常、Apple製品やAndroidにはインストールされていません。

`'Yu Gothic'`	游ゴシック游ゴシック
`'Yu Gothic Medium'`	游ゴシック Medium 游ゴシック Medium
`'Yu Gothic UI Light'`	游ゴシック UI Light 游ゴシック UI Light
`'Yu Gothic UI Semibold'`	游ゴシック UI Semibold 游ゴシック UI Semibold
`'Yu Mincho'`	游明朝游明朝
`'Yu Mincho Light'`	游明朝 Light 游明朝 Light
`'Yu Mincho Demibold'`	游明朝 Demibold 游明朝 Demibold
`Meiryo`	メイリオメイリオ
`'Meiryo UI'`	メイリオ UI メイリオ UI
`'MS Gothic'`	ＭＳゴシックＭＳゴシック	monospace
`'MS PGothic'`	ＭＳＰゴシックＭＳＰゴシック
`'MS UI Gothic'`	ＭＳ UIゴシックＭＳ UIゴシック
`'MS PMincho'`	ＭＳＰ明朝ＭＳＰ明朝
`'MS Mincho'`	ＭＳ明朝ＭＳ明朝	monospace
`'BIZ UDGothic'`	BIZ UDゴシック by モリサワ BIZ UDゴシック by モリサワ	monospace
`'BIZ UDPGothic'`	BIZ UDPゴシック by モリサワ BIZ UDPゴシック by モリサワ
`'BIZ UDMincho'`	BIZ UD明朝 by モリサワ BIZ UD明朝 by モリサワ	monospace
`'BIZ UDPMincho'`	BIZ UDP明朝 by モリサワ BIZ UDP明朝 by モリサワ

日本語(Apple)

iOS(16)、iPadOS(16)、macOS(Ventura)に共通でインストールされている日本語フォントです。通常、WindowsやAndroidにはインストールされていません。

`'Hiragino Kaku Gothic Pro W3'`	ヒラギノ角ゴ Pro W3 ヒラギノ角ゴ Pro W3
`'Hiragino Kaku Gothic Pro W6'`	ヒラギノ角ゴ Pro W6 ヒラギノ角ゴ Pro W6
`'Hiragino Kaku Gothic ProN W3'`	ヒラギノ角ゴ ProN W3 ヒラギノ角ゴ ProN W3
`'Hiragino Kaku Gothic ProN W6'`	ヒラギノ角ゴ ProN W6 ヒラギノ角ゴ ProN W6
`'Hiragino Maru Gothic Pro W4'`	ヒラギノ丸ゴ Pro W4 ヒラギノ丸ゴ Pro W4
`'Hiragino Maru Gothic ProN W4'`	ヒラギノ丸ゴ ProN W4 ヒラギノ丸ゴ ProN W4
`'Hiragino Mincho Pro W3'`	ヒラギノ明朝 Pro W3 ヒラギノ明朝 Pro W3
`'Hiragino Mincho Pro W6'`	ヒラギノ明朝 Pro W6 ヒラギノ明朝 Pro W6
`'Hiragino Mincho ProN W3'`	ヒラギノ明朝 ProN W3 ヒラギノ明朝 ProN W3
`'Hiragino Mincho ProN W6'`	ヒラギノ明朝 ProN W6 ヒラギノ明朝 ProN W6
`'Hiragino Sans W3'`	ヒラギノ Sans W3 ヒラギノ Sans W3
`'Hiragino Sans W6'`	ヒラギノ Sans W6 ヒラギノ Sans W6
`'Hiragino Sans W7'`	ヒラギノ Sans W7 ヒラギノ Sans W7

Webフォント

`'Noto Sans JP'`	Webフォント Webフォント
`'Noto Serif JP'`	Webフォント Webフォント
`'Hachi Maru Pop'`	Webフォント Webフォント
`'Train One'`	Webフォント Webフォント
`'Rampart One'`	Webフォント Webフォント

Google Fonts


<style>
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Noto+Sans+JP&family=Noto+Serif+JP&family=Rampart+One&family=Train+One&display=swap');
</style>

記述方法

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

実行結果初期状態

Font 文字

font-familyにserif、sans-serif、monospaceを指定した例を示します。

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-family: serif;
}

実行結果serif

Font 文字

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-family: sans-serif;
}

実行結果sans-serif

Font 文字

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-family: monospace;
}

実行結果monospace

Font 文字

スペースを含むフォントファミリー名の場合、'や"で囲む必要があります。

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-family: 'Times New Roman';
}

実行結果'Times New Roman'

Font 文字

フォントファミリーは,で繋(つな)げることで複数指定することができます。複数指定した場合は先に指定したフォントファミリーが優先され、見つからない場合に次のフォントファミリーが使われます。 ('Times New Roman'やArialといった英語のフォントファミリーには日本語を含まないので、serifが日本語のフォントファミリーとして使用されています。)

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-family: 'Times New Roman', serif;
}

実行結果'Times New Roman', serif

Font 文字

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    font-family: Arial, 'Times New Roman', serif;
}

実行結果Arial, 'Times New Roman', serif

Font 文字

実践的な設定手順

まず、serif(明朝体)、sans-serif(ゴシック体)、monospace(等幅)、cursive(草書体)、fantasy(かわいい系)のどれにするかを決めます。

ここでは以下のCSSコードを見やすく表示させることを目的にしましょう。

HTML


<div class="sample" style="white-space: pre;">
div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}
</div>

CSS


.sample {
    white-space: pre;   /* スペース／改行 */
}

実行結果初期状態

div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}

等幅フォントにするとして、汎用フォントファミリーであるmonospaceを(最後に)指定します。幅が揃ったので見やすくなりました。

HTML


<div class="sample" style="white-space: pre;">
div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}
</div>

CSS


.sample {
    white-space: pre;   /* スペース／改行 */
}

CSS


.sample {
    font-family:
        monospace;      /* 汎用 */
}

実行結果monospace

div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}

Apple、Windows、Androidで共通にインストールされている'Courier New'が優先されるようにmonospaceの前に書きます。

HTML


<div class="sample" style="white-space: pre;">
div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}
</div>

CSS


.sample {
    white-space: pre;   /* スペース／改行 */
}

CSS


.sample {
    font-family:
        'Courier New',  /* 共通 英語 */
        monospace;      /* 汎用 */
}

実行結果'Courier New', monospace

div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}

Windowsの場合、日本語に'BIZ UDMincho'を使いたい時には、2番目に指定します。こうすると英語は'Courier New'、日本語は(Windowsの場合は)'BIZ UDMincho'で表示されます。

HTML


<div class="sample" style="white-space: pre;">
div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}
</div>

CSS


.sample {
    white-space: pre;   /* スペース／改行 */
}

CSS


.sample {
    font-family:
        'Courier New',  /* 共通 英語 */
        'BIZ UDMincho', /* Windows 日本語 */
        monospace;      /* 汎用 */
}

実行結果'Courier New', 'BIZ UDMincho', monospace

div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}

なお、ここで'Courier New'と'BIZ UDMincho'を逆にした場合、'BIZ UDMincho'は英語フォントを含むので(英語、日本語とも)全てが'BIZ UDMincho'で表示されます。 (それが良いのであれば、これで良いのですが。。。)

HTML


<div class="sample" style="white-space: pre;">
div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}
</div>

CSS


.sample {
    white-space: pre;   /* スペース／改行 */
}

CSS


.sample {
    font-family:
        'BIZ UDMincho', /* Windows 日本語 */
        'Courier New',  /* 共通 英語 */
        monospace;      /* 汎用 */
}

実行結果'BIZ UDMincho', 'Courier New', monospace

div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}

また、Windowsの場合、英語を'Lucida Console'で表示したい場合、共通の'Courier New'の前に書きます。

HTML


<div class="sample" style="white-space: pre;">
div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}
</div>

CSS


.sample {
    white-space: pre;   /* スペース／改行 */
}

CSS


.sample {
    font-family:
        'Lucida Console',  /* Windows 英語 */
        'Courier New',     /* 共通 英語 */
        'BIZ UDMincho',    /* Windows 日本語 */
        monospace;         /* 汎用 */
}

実行結果'Lucida Console', 'Courier New', 'BIZ UDMincho', monospace

div {
    border:      4px solid #05b; /* 境界線 */
    padding:     1rem;           /* 内側の余白 */
    height:      230px;          /* 高さ */
    width:       230px;          /* 幅 */
    text-align:  center;         /* 左右に寄せる */
    text-shadow: 0 0 10px white; /* 文字の影 */
}

このように、一般的に日本語サイトでは次の順番でフォントファミリーを指定します。

(Apple,Windowsなど)固有の「英語」のフォントファミリー
共通の「英語」のフォントファミリー
固有の「日本語」のフォントファミリー
共通の「日本語」のフォントファミリー
共通の「日本語」のフォントファミリー
汎用フォントファミリー(serif、sans-serif、monospaceなど)

サンプルコード

以下、serif系、sans-serif系、monospace系のサンプルコードを示します。

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
  font-family:
                        /* Apple 英語 */
    Constantia,         /* Windows 英語 */
    'Times New Roman',  /* 共通 英語 Times Georgia */
                        /* Apple 日本語 */
    'Yu Mincho',        /* Windows 日本語 */
    'Noto Serif JP',    /* 共通 日本語 */
    serif;              /* 汎用 */
}

実行結果serif系

Font 文字

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
  font-family:
                    /* Apple 英語 */
    'Segoe UI',     /* Windows 英語 */
    Arial,          /* 共通 英語 Helvetica Verdana */
                    /* Apple 日本語 */
    Meiryo,         /* Windows 日本語 */
    'Noto Sans JP', /* 共通 日本語 */
    sans-serif;     /* 汎用 */
}

実行結果sans-serif系

Font 文字

HTML


<div class="sample">Font 文字</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
  font-family:
                       /* Apple 英語 */
    'Lucida Console',  /* Windows 英語 */
    'Courier New',     /* 共通 英語 Courier */
                       /* Apple 日本語 */
    'BIZ UDGothic',    /* Windows 日本語 */
    'Noto Sans JP',    /* 共通 日本語 */
    monospace;         /* 汎用 */
}

実行結果monospace系

Font 文字

CSSメーカー

左側の欄にフォントファミリーを入力することで、どのように表示されるかを確認することができます。

	Font 文字 Font 文字
	Font 文字 Font 文字
	Font 文字 Font 文字
	Font 文字 Font 文字
	Font 文字 Font 文字
	Font 文字Font 文字

.sample {
    font-family: ;
}