Webブラウザーのデフォルトのフォント

Webブラウザのデフォルトのフォントを紹介します。

補足

WebブラウザーでHTML表示時にフォントを指定しない場合に使用されるフォントも参照して下さい。

デフォルトフォント

Webブラウザのデフォルトのフォントは次の通りです

Windows 10/11
Webブラウザ	Sans-Serif (ゴシック体系)	Serif (明朝体系)	Monospace (等幅系)
Google Chrome	メイリオ	游明朝	MS ゴシック (10pt)
Microsoft Edge (新)	メイリオ	游明朝	BIZ UD ゴシック (10pt)
Microsoft Edge	メイリオ	游明朝	MS ゴシック (10pt)
Internet Explorer	MS-P ゴシック	MS-P 明朝	MS ゴシック (欧文:Courier New)
Microsoft Edge(旧)	メイリオ	游明朝	MS ゴシック (欧文:Consolas)
Firefox	メイリオ	游明朝	MS ゴシック

MacOS 10.15
Webブラウザ	Sans-Serif (ゴシック体系)	Serif (明朝体系)	Monospace (等幅系)
Safari	ヒラギノ角ゴシック W4	ヒラギノ明朝 ProN W3 (欧文:NewYork)	ヒラギノ角ゴシック W3(欧文:Courier)
Google Chrome	ヒラギノ明朝 ProN W3 (欧文:NewYork)	ヒラギノ明朝 ProN W3	Osaka等幅 (10pt)

Windows 7
Webブラウザ	Sans-Serif (ゴシック体系)	Serif (明朝体系)	BMonospace (等幅系)
Internet Explorer	MS-P ゴシック	MS-P 明朝	MSゴシック
Google Chrome	MS-P ゴシック	MS-P 明朝	MSゴシック
Firefox	MS-P ゴシック	MS-P 明朝	MSゴシック

動作確認 (Windows 10 / Windows 11) 2024版

コード

下記のHTMLファイルを準備します。

CssStandardFont.css

.None{
    font-family:'';
}

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

.Serif {
    font-family:serif;
}

.Monospace {
    font-family:monospace;
}

.MSGothic {
    font-family: 'MS Gothic';
}
.MSGothic10 {
  font-size: 10pt;
  font-family: 'MS Gothic';
}
.MSPGothic {
    font-family: 'MS PGothic';
}
.MSPMincho {
    font-family: 'MS PMincho';
}

.Meiryo {
    font-family: 'Meiryo';
}
.Meiryo10 {
  font-size: 10pt;
  font-family: 'Meiryo';
}

.SegoeUI {
    font-family: 'Segoe UI';
}

.YuGothic {
    font-family: 'Yu Gothic';
}

.YuMincho{
    font-family: 'Yu Mincho';
}

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

.Consolas {
    font-family: Consolas;
}

.Courier {
    font-family: 'Courier New';
}

.BizUDGothic {
  font-family: 'BIZ UDGothic';
}
.BizUDPGothic {
  font-family: 'BIZ UDPGothic';
}
.BizUDGothic10 {
  font-size:10pt;
  font-family: 'BIZ UDGothic';
}

CssStandardFont.html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="CssStandardFont.css" rel="Stylesheet" type="text/css" />
</head>
<body>
  <span class="None">Penguin : ペンギンは鳥だが泳げる。 (指定なし)</span>
  <br />
  <span class="SansSerif">Penguin : ペンギンは鳥だが泳げる。 (Sans-serif)</span>
  <br />
  <span class="Serif">Penguin : ペンギンは鳥だが泳げる。 (Serif)</span>
  <br />
  <span class="Monospace">Penguin : ペンギンは鳥だが泳げる。 (Monospace)</span>
  <br />
  <span class="MSGothic">Penguin : ペンギンは鳥だが泳げる。 (MSゴシック)</span>
  <br />
  <span class="MSGothic10">Penguin : ペンギンは鳥だが泳げる。 (MSゴシック 10pt)</span>
  <br />
  <span class="MSPGothic">Penguin : ペンギンは鳥だが泳げる。 (MS Pゴシック)</span>
  <br />
  <span class="MSPMincho">Penguin : ペンギンは鳥だが泳げる。 (MS P明朝)</span>
  <br />
  <span class="Meiryo">Penguin : ペンギンは鳥だが泳げる。 (メイリオ)</span>
  <br />
  <span class="Meiryo10">Penguin : ペンギンは鳥だが泳げる。 (メイリオ 10pt)</span>
  <br />
  <span class="SegoeUI">Penguin : ペンギンは鳥だが泳げる。(Segoe UI)</span>
  <br />
  <span class="YuGothic">Penguin : ペンギンは鳥だが泳げる。 (游ゴシック)</span>
  <br />
  <span class="YuMincho">Penguin : ペンギンは鳥だが泳げる。 (游明朝)</span>
  <br />
  <span class="BizUDGothic">Penguin : ペンギンは鳥だが泳げる。 (BIZ UD ゴシック)</span>
  <br />
  <span class="BizUDPGothic">Penguin : ペンギンは鳥だが泳げる。 (BIZ UDP ゴシック)</span>
  <br />
  <span class="BizUDGothic10">Penguin : ペンギンは鳥だが泳げる。 (BIZ UD ゴシック 10pt)</span>
  <br />
  <span class="TimesNewRoman">Penguin : ペンギンは鳥だが泳げる。 (Times New Roman)</span>
  <br />
  <span class="Consolas">Penguin : ペンギンは鳥だが泳げる。 (Consolas)</span>
  <br />
  <span class="Courier">Penguin : ペンギンは鳥だが泳げる。 (Courier New)</span>
  <br />
  <span class="System">Penguin : ペンギンは鳥だが泳げる。 (Systemw)</span>

</body>
</html>

表示結果

Webブラウザで上記のHTMLファイルを表示します。下図の画面が表示されます。

動作確認 (Windows 10 / Windows 11)

コード

下記のHTMLファイルを準備します。

CssStandardFont.css

.None{
    font-family:'';
}

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

.Serif {
    font-family:serif;
}

.Monospace {
    font-family:monospace;
}

.MSGothic {
    font-family: 'MS Gothic';
}

.MSPGothic {
    font-family: 'MS PGothic';
}

.MSPMincho {
    font-family: 'MS PMincho';
}

.Meiryo {
    font-family: 'Meiryo';
}

.SegoeUI {
    font-family: 'Segoe UI';
}

.YuGothic {
    font-family: 'Yu Gothic';
}

.YuMincho{
    font-family: 'Yu Mincho';
}

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

.Consolas {
    font-family: Consolas;
}

.Courier {
    font-family: 'Courier New';
}

CssStandardFont.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="CssStandardFont.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <span class="None">Penguin : ペンギンは鳥だが泳げる。 (指定なし)</span>
    <br />
    <span class="SansSerif">Penguin : ペンギンは鳥だが泳げる。 (Sans-serif)</span>
    <br />
    <span class="Serif">Penguin : ペンギンは鳥だが泳げる。 (Serif)</span>
    <br />
    <span class="Monospace">Penguin : ペンギンは鳥だが泳げる。 (Monospace)</span>
    <br />
    <span class="MSGothic" style="font-size:10pt;">Penguin : ペンギンは鳥だが泳げる。 (MSゴシック)</span>
    <br />
    <span class="MSGothic">Penguin : ペンギンは鳥だが泳げる。 (MSゴシック)</span>
    <br />
    <span class="MSPGothic">Penguin : ペンギンは鳥だが泳げる。 (MS Pゴシック)</span>
    <br />
    <span class="MSPMincho">Penguin : ペンギンは鳥だが泳げる。 (MS P明朝)</span>
    <br />
    <span class="Meiryo">Penguin : ペンギンは鳥だが泳げる。 (メイリオ)</span>
    <br />
    <span class="SegoeUI">Penguin : ペンギンは鳥だが泳げる。(Segoe UI)</span>
    <br />
    <span class="YuGothic">Penguin : ペンギンは鳥だが泳げる。 (游ゴシック)</span>
    <br />
    <span class="YuMincho">Penguin : ペンギンは鳥だが泳げる。 (游明朝)</span>
    <br />
    <span class="TimesNewRoman">Penguin : ペンギンは鳥だが泳げる。 (Times New Roman)</span>
    <br />
    <span class="Consolas">Penguin : ペンギンは鳥だが泳げる。 (Consolas)</span>
    <br />
    <span class="Courier">Penguin : ペンギンは鳥だが泳げる。 (Courier New)</span>
    <br />
    <span class="System">Penguin : ペンギンは鳥だが泳げる。 (Systemw)</span>
</body>
</html>

表示結果

Webブラウザで上記のHTMLファイルを表示します。下図の画面が表示されます。

動作確認 (MacOS 10.15)

コード

下記のHTMLファイルを準備します。

CssStandardFontMac.css

body {
}

.None{
    font-family:'';
}

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

.Serif {
    font-family:serif;
}

.Monospace {
    font-family:monospace;
}

.HiraginoW0 {
    font-family: 'HiraginoSans-W0';
    /*, 'ヒラギノ角ゴシック W0', 'Hiragino Kaku Gothic Pro W0', 'HiraKakuPro-W0';*/
}

.HiraginoW1 {
    font-family: 'HiraginoSans-W1';
    /*,'ヒラギノ角ゴシック W1', 'Hiragino Kaku Gothic Pro W1', 'HiraKakuPro-W1';*/
}

.HiraginoW2 {
    font-family: 'HiraginoSans-W2';
    /*,'ヒラギノ角ゴシック W2', 'Hiragino Kaku Gothic Pro W2', 'HiraKakuPro-W2';
    */
}

.HiraginoW3 {
    font-family: 'HiraginoSans-W3';
    /*,'ヒラギノ角ゴシック W3', 'Hiragino Kaku Gothic Pro W3', 'HiraKakuPro-W3';
    */
}

.HiraginoW4 {
    font-family: 'HiraginoSans-W4';
    /*,'ヒラギノ角ゴシック W4', 'Hiragino Kaku Gothic Pro W4', 'HiraKakuPro-W4';
    */
}

.HiraginoW5 {
    font-family: 'HiraginoSans-W5';
    /*,'ヒラギノ角ゴシック W5', 'Hiragino Kaku Gothic Pro W5', 'HiraKakuPro-W5';
    */
}

.HiraginoW6 {
    font-family: 'HiraginoSans-W6';
    /*,'ヒラギノ角ゴシック W6', 'Hiragino Kaku Gothic Pro W6', 'HiraKakuPro-W6';
    */
}

.HiraginoW7 {
    font-family: 'HiraginoSans-W7';
    /*,'ヒラギノ角ゴシック W7', 'Hiragino Kaku Gothic Pro W7', 'HiraKakuPro-W7';
    */
}

.HiraginoW8 {
    font-family: 'HiraginoSans-W8';
    /*,'ヒラギノ角ゴシック W8', 'Hiragino Kaku Gothic Pro W8', 'HiraKakuPro-W8';
    */
}

.HiraginoW9 {
    font-family: 'HiraginoSans-W9';
    /*,'ヒラギノ角ゴシック W9', 'Hiragino Kaku Gothic Pro W9', 'HiraKakuPro-W9';
    */
}

.HiraginoMGW4 {
    font-family: 'Hiragino Maru Gothic ProN';
    /*'ヒラギノ丸ゴ ProN W4', 'Hiragino Maru Gothic ProN';*/
}

.HiraginoMinW3 {
    font-family: "HiraMinProN-W3";
    /*"ヒラギノ明朝 ProN W3"*/
}

.HiraginoMinW6 {
    font-family: "HiraMinProN-W6";
    /*"ヒラギノ明朝 ProN W6"*/
}
.Lucida {
    font-family: 'LucidaGrande';
}

.NewYork {
    font-family: 'NewYork';
}

.Osaka {
    font-family: 'Osaka';
}
.OsakaMono {
    font-family: 'Osaka-mono';
}
.Courier {
    font-family: 'Courier';
}

CssStandardFontMac.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="CssStandardFontMac.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <span class="None">Penguin : ペンギンは鳥だが泳げる。 (指定なし)</span>
    <br />
    <span class="SansSerif">Penguin : ペンギンは鳥だが泳げる。 (Sans-serif)</span>
    <br />
    <span class="Serif">Penguin : ペンギンは鳥だが泳げる。 (Serif)</span>
    <br />
    <span class="Monospace">Penguin : ペンギンは鳥だが泳げる。 (Monospace)</span>
    <br />
    <span class="Courier" style="font-size:10pt;">Penguin : ペンギンは鳥だが泳げる。 (Courier 10pt)</span>
    <br />
    <span class="Osaka" style="font-size:10pt;">Penguin : ペンギンは鳥だが泳げる。 (Osaka 10pt)</span>
    <br />
    <span class="OsakaMono" style="font-size:10pt;">Penguin : ペンギンは鳥だが泳げる。 (Osaka等幅 10pt)</span>
    <br />
    <span class="HiraginoW3" style="font-size:10pt;">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W3 10pt)</span>
    <br />
    <span class="HiraginoW0">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W0)</span>
    <br />
    <span class="HiraginoW1">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W1)</span>
    <br />
    <span class="HiraginoW2">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W2)</span>
    <br />
    <span class="HiraginoW3">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W3)</span>
    <br />
    <span class="HiraginoW4">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W4)</span>
    <br />
    <span class="HiraginoW5">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W5)</span>
    <br />
    <span class="HiraginoW6">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W6)</span>
    <br />
    <span class="HiraginoW7">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W7)</span>
    <br />
    <span class="HiraginoW8">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W8)</span>
    <br />
    <span class="HiraginoW9">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ角ゴシック W9)</span>
    <br />
    <span class="HiraginoMGW4">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ丸ゴシック Pro W4)</span>
    <br />
    <span class="HiraginoMinW3">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ明朝 ProN W3)</span>
    <br />
    <span class="HiraginoMinW6">Penguin : ペンギンは鳥だが泳げる。 (ヒラギノ明朝 ProN W6)</span>
    <br />
    <span class="Lucida">Penguin : ペンギンは鳥だが泳げる。 (Luchida Grande)</span>
    <br />
    <span class="NewYork">Penguin : ペンギンは鳥だが泳げる。 (NewYork)</span>
    <br />
    <span class="Osaka">Penguin : ペンギンは鳥だが泳げる。 (Osaka)</span>
    <br />
    <span class="OsakaMono">Penguin : ペンギンは鳥だが泳げる。 (Osaka等幅)</span>
    <br />
    <span class="Courier">Penguin : ペンギンは鳥だが泳げる。 (Courier)</span>
</body>
</html>