ホーム>Web サイト構築リソース>フォントのダウンロード
ダウンロード

最新のフォントスタック

すべての最新のOSの書体分類によって整理されたシステムフォントスタックCSS

利用可能な最速のフォント。ダウンロード、レイアウトシフト、フラッシュなし - インスタントレンダリング。


システムUI・移行・古いスタイル・ヒューマニスト・幾何学的ヒューマニスト

クラシックヒューマニスト・ネオグロテスク・モノスペーススラブセリフ・モノスペースコード

産業・丸いsans・slab serif・antique・didone・手書き


追加機能 /オペレーティングシステムのサポート /プラグインおよび拡張機能


システムUI

System UIフォントは、オペレーティングシステムインターフェイスのネイティブです。それらは非常に読みやすく、小さなサイズで読みやすく、多くのフォントウェイトが含まれており、UI要素に最適です。

CSSフォントスタック

 font-family : system-ui , sans-serif;

システムUIフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューしますシステムUIフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
サンフランシスコ● ● ● ● ● ● ● ● ●
Segoe UI ● ● ● ● ● ● ● ● ●
ロボット● ● ● ● ● ● ● ● ●
ubuntu ● ● ● ● ●
Cantarell ● ● ● ● ●
noto sans ● ● ● ● ● ● ● ● ●

メモ

  • System UIは、フォントスタックではなく、デフォルトのユーザーインターフェイスフォントを表すCSS値、 system-uiです。すべての最新のオペレーティングシステムで広くサポートされています。
  • 表示されているフォントは、各最新のOSのUIのデフォルトのフォントです。

上に戻る↑

遷移

トランジショナル書体は、啓蒙時代に開発された古いスタイルとモダンな書体のミックスです。過渡期の書体の最も有名な例の1つは、Times of London新聞のために開発されたTimes New Romanです。

CSSフォントスタック

 font-family : Charter , 'Bitstream Charter' , 'Sitka Text' , Cambria , serif;

トランジショナルフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューしますトランジショナルフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
チャーター● ● ●
ビットストリームチャーター● ●
シトカのテキスト● ●
カンブリア● ●
Notoserif¹ ● ●

メモ

  • チャーターは、1987年にマシューカーターが低解像度の300DPIファックスマシンとレーザープリンター向けに設計した幻想的で時代を超越した書体です。読みやすさを支援する大きなX-Heightがあり、今日の画面で美しく保持されています。
  • MacOSのチャーターには、奇妙な広い非壊れた空間（   ）があります。このバグはAppleに報告されています。
  • シトカは、チャーターにわずかに似ているマシュー・カーターがデザインしたもう1つの美しい書体です。 Sitkaは、読みやすさを最適化するために、Microsoftの高度な読書技術のコラボレーションで設計されました。
  • AndroidはNoto Serifをデフォルトのserifフォントとして使用するため、スタックで指定する必要はありません。

上に戻る↑

古いスタイル

古いスタイルの書体は、斜めのストレス、厚いストロークと薄いストロークの低いコントラスト、丸いセリフの特徴であり、ルネッサンス時代に開発されました。古いスタイルの書体の最も有名な例の1つはGaramondです。

CSSフォントスタック

 font-family : 'Iowan Old Style' , 'Palatino Linotype' , 'URW Palladio L' , P052 , serif;

古いスタイルのフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューします古いスタイルのフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
アイオワの古いスタイル● ● ●
パラチーノリノイプ● ●
Urw Palladio l ● ●
P052 ● ●
Notoserif¹ ● ●

メモ

  • AndroidはNoto Serifをデフォルトのserifフォントとして使用するため、スタックで指定する必要はありません。

上に戻る↑

ヒューマニスト

ヒューマニストの書体は、有機的で書道の形と、厚いストロークと薄いストロークの間の低いコントラストによって特徴付けられます。これらの書体は、ルネサンス時代の手書きに触発されており、他のSANS-Serifの書体よりも読みやすく読みやすいと考えられていることがよくあります。

CSSフォントスタック

 font-family : Seravek , 'Gill Sans Nova' , Ubuntu , Calibri , 'DejaVu Sans' , source-sans-pro , sans-serif;

ヒューマニストフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューしますヒューマニストフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
Seravek ● ● ● ● ●
ギル・サン・ノヴァ● ● ● ●
ubuntu ● ● ● ● ●
カリブリ● ● ●
dejavu sans ● ● ●
ソースSANS Pro ● ● ●

メモ

  • Gill Sans Novaは、補足的なダウンロード可能なフォントとして入手できます。
  • Source Sans ProはAndroidの下でSource-Sans-Proを使用するため、このフォントはAndroidデバイスのみをターゲットにします。

上に戻る↑

幾何学的ヒューマニスト

幾何学的なヒューマニストの書体は、清潔で幾何学的な形と均一なストローク幅によって特徴付けられます。これらの書体は、多くの場合、現代的で洗練されていると見なされ、見出しやその他の表示目的に使用されます。 Futuraは、この分類の有名な例です。

CSSフォントスタック

 font-family : Avenir , Montserrat , Corbel , 'URW Gothic' , source-sans-pro , sans-serif;

幾何学的ヒューマニストフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューします幾何学的ヒューマニストフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
アベニール● ● ● ● ●
モンセラト● ● ● ● ● ● ● ● ●
コーベル● ● ●
ウルゴシック● ●
ソースSANS Pro ● ● ●

メモ

  • Avenirは、MacOSのAvenirにAvenirに選ばれました。なぜなら、Weight 300は、Avenirが次に持っている200体重よりもウェブ上ではるかに読みやすいからです。ウルトラライトまたはウルトラブラックを探している場合は、次にAvenirにAvenirを交換してください。
  • Source Sans ProはAndroidの下でSource-Sans-Proを使用するため、このフォントはAndroidデバイスのみをターゲットにします。

上に戻る↑

古典的なヒューマニスト

古典的なヒューマニストの書体は、ストロークがセリフで終わることなくストローク端子に到達するときにストロークが微妙に広がる方法によって特徴付けられます。これらの書体は、古典的なローマの首都とルネッサンス期間の墓石の石の彫刻に触発されています。

CSSフォントスタック

 font-family : Optima , Candara , 'Noto Sans' , source-sans-pro , sans-serif;

クラシックヒューマニストフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューします古典的なヒューマニストフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
オプティマ● ● ●
カンダラ● ● ●
noto sans ● ● ● ● ● ● ● ● ●
ソースSANS Pro ● ● ●

メモ

  • Source Sans ProはAndroidの下でSource-Sans-Proを使用するため、このフォントはAndroidデバイスのみをターゲットにします。

上に戻る↑

ネオグロテスク

ネオグロテスクな書体は、19世紀後半から20世紀初頭に開発されたSans-Serifのスタイルであり、その清潔で幾何学的な形と均一な脳卒中幅が特徴です。ネオグロテスクな書体の最も有名な例の1つは、Helveticaです。

CSSフォントスタック

 font-family : Inter , Roboto , 'Helvetica Neue' , 'Arial Nova' , 'Nimbus Sans' , Arial , sans-serif;

ネオグロテスクなフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューしますネオグロテスクなフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
インター● ● ● ● ● ● ● ● ●
ロボット● ● ● ● ● ● ● ● ●
Helvetica Neue ● ● ● ● ● ● ●
Arial Nova ● ● ●
ニンバス・サン● ● ●
アリアル● ● ●

メモ

  • Arial Novaは、補足的なダウンロード可能なフォントとして利用できます。
  • Robotoは、Linux（MX Linux、Elementaryosなど）および手動インストールに使用されます。 AndroidでRobotoをレンダリングするのではなく、Androidの一般的なSans-Serifは意志になります。

上に戻る↑

モノスペーススラブセリフ

Monospace Slab Serifの書体は、形状に関係なく同じ幅とそのシンプルな幾何学的な形式を持つ固定された幅の文字によって特徴付けられます。レポート、表形式の作業、技術文書のためにタイプライター出力をエミュレートするために使用されます。

CSSフォントスタック

 font-family : 'Nimbus Mono PS' , 'Courier New' , monospace;

Monospace Slab Serif Fontスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューしますモノスペーススラブセリフフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
Nimbus Mono PS ● ●
Courier New ● ●
Cutive Mono ●

メモ

  • Nimbus Mono PSは、多くのLinuxディストリビューションがCourier Newの名前エイリアスを作成し、常にスラブセリフを表すとは限らないため、最初に指定されています。
  • AndroidがCourier Newの名前エイリアスを作成するため、Cutive Monoをスタックで表現する必要はありません。
  • 残念ながら、Cutive Monoには1つの重量しかありません

上に戻る↑

モノスペースコード

Monospace Codeの書体は、プログラミングやその他の技術アプリケーションで使用するために特別に設計されています。これらの書体の特徴は、モノスパースのデザインによって特徴付けられます。つまり、すべての文字とキャラクターには同じ幅があり、明確で読みやすい形があります。

CSSフォントスタック

 font-family : ui-monospace , 'Cascadia Code' , 'Source Code Pro' , Menlo , Consolas , 'DejaVu Sans Mono' , monospace;

モノスペースコードフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューしますモノスペースコードフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
SFモノ● ● ● ● ● ●
カスカディアコード● ● ● ● ● ●
ソースコードプロ● ● ● ● ● ● ●
メンロ● ●
コンソル● ●
Dejavu Sans Mono ● ●
ドロイドサンモノ●

メモ

  • SF Monoは、Safariを使用している間、MACOS 10.15+およびiOS 13.3+でui-monospaceでのみ利用できます
  • monospaceそれの名前エイリアスであるため、Android用のDroidSans Monoはスタックで指定する必要はありません

上に戻る↑

産業

産業用書物は19世紀後半に生まれ、その間、テクノロジーと産業の進歩に大きく影響されました。産業用書体の特徴は、大胆でサンセリフの文字形式、シンプルで簡単な外観、直線と幾何学的な形状の使用によって特徴付けられます。

CSSフォントスタック

 font-family : Bahnschrift , 'DIN Alternate' , 'Franklin Gothic Medium' , 'Nimbus Sans Narrow' , sans-serif-condensed , sans-serif;

産業用フォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューします産業用フォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
Bahnschrift ● ● ● ● ● ● ● ● ●
din代替 ●
フランクリンゴシック様式 ●
ニンバスは狭くなります● ●
ロボット凝縮● ● ● ● ● ● ● ● ●

メモ

  • このスタックはオペレーティングシステム全体のウェイトに制限されているため、中/大胆なディスプレイフォントとして使用することをお勧めします
  • Bahnschriftは、Windowsに追加された最初の変数フォントの1つです。
  • Roboto Condensedは、Androidの下でSans-Serifが凝縮した名前を使用しているため、このフォントはAndroidデバイスのみをターゲットにします。

上に戻る↑

丸いsans

丸い書体は、丸い湾曲した文字形式によって特徴付けられ、より柔らかく、よりフレンドリーな外観を与えます。丸いエッジは、書体によりオーガニックで遊び心のある雰囲気を与え、非公式または子供向けのデザインでの使用に適しています。丸みを帯びたSans-Serifスタイルは1950年代から人気があり、広告、ブランディング、その他の形式のグラフィックデザインで広く使用され続けています。

CSSフォントスタック

 font-family : ui-rounded , 'Hiragino Maru Gothic ProN' , Quicksand , Comfortaa , Manjari , 'Arial Rounded MT' , 'Arial Rounded MT Bold' , Calibri , source-sans-pro , sans-serif;

丸いsansフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューします丸いsansフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
SF Proラウンド● ● ● ● ● ● ● ● ●
ヒラギーノ・マル・ゴシック●
流砂● ● ●
快適さ● ● ●
マンジャリ● ● ●
arialの丸みを帯びたMt ●
arialの丸みを帯びたMt太字 ●
カリブリ● ● ●
ソースSANS Pro ● ● ●

メモ

  • SF Pro Roundedは、Safariを使用している間、MacOS 10.15+およびiOS 13.3+でui-roundedことを介してのみ利用できます
  • Hiragino Maru Gothicは技術的には日本の書体ですが、すべてのラテンキャラクターをサポートしています。 Macフォントには太字が含まれていないため、Faux Boldが画面に表示されます。
  • iOS、Mac、および古いWindowsのインストールには、Arialの丸いMTが必要ですが
  • Source Sans ProはAndroidの下でSource-Sans-Proを使用するため、このフォントはAndroidデバイスのみをターゲットにします。丸い書体ではありませんが、ここのロボットよりも優れています。

上に戻る↑

スラブセリフ

スラブセリフ書体は、各文字形式の端に厚いブロックのようなセリフの存在によって特徴付けられます。これらのセリフは通常、ブラケットなしです。つまり、文字のメインストロークへの湾曲または先細の遷移はありません。

CSSフォントスタック

 font-family : Rockwell , 'Rockwell Nova' , 'Roboto Slab' , 'DejaVu Serif' , 'Sitka Small' , serif;

スラブセリフフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューしますスラブセリフフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
ロックウェル● ●
ロックウェルノバ● ● ● ●
ロボットスラブ● ● ● ●
Dejavu Serif ● ●
シトカ・スモール● ●
Noto serif ● ●

メモ

  • RockwellはWindows Officeに含まれています
  • Rockwell Novaは、補足的なダウンロード可能なフォントとして入手できます。
  • AndroidはNoto Serifをデフォルトのserifフォントとして使用するため、スタックで指定する必要はありません。

上に戻る↑

アンティーク

エジプト人としても知られるアンティークの書体は、19世紀に人気のあるセリフ書体のサブセットです。それらは、ブロックのようなセリフと厚い均一なストローク重量によって特徴付けられます。

CSSフォントスタック

 font-family : Superclarendon , 'Bookman Old Style' , 'URW Bookman' , 'URW Bookman L' , 'Georgia Pro' , Georgia , serif;

アンティークフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューしますアンティークフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
SuperClarendon ● ● ● ●
ブックマンオールドスタイル● ●
ウルブックマン● ●
ジョージアプロ● ● ● ● ●
ジョージア● ●
Notoserif¹ ● ●

メモ

  • Georgia Proは、補足的なダウンロード可能なフォントとして利用できます。
  • AndroidはGeorgiaのエイリアスとしてNoto Serifを使用するため、スタックで指定する必要はありません。

上に戻る↑

ディドン

現代の書体としても知られているDidOneの書体は、厚いストロークと薄いストローク、垂直応力、および括弧なしのヘアラインセリフの高いコントラストによって特徴付けられます。 Didoneスタイルは18世紀後半に出現し、19世紀に人気を博しました。

CSSフォントスタック

 font-family : Didot , 'Bodoni MT' , 'Noto Serif Display' , 'URW Palladio L' , P052 , Sylfaen , serif;

DidOneフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューしますDidOneフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
ディド● ●
ボドーニ山● ● ●
Noto serifディスプレイ● ● ● ● ● ● ● ● ●
Urw Palladio l ● ●
P052 ● ●
Sylfaen ●
Notoserif¹ ● ●

メモ

  • AndroidはNoto Serifをデフォルトのserifフォントとして使用するため、スタックで指定する必要はありません。
  • SylfaenにはBoldが含まれていないため、Faux Boldが画面に表示されます。

上に戻る↑

手書き

手書きの書体は、手書きの外観と感触を模倣するように設計されています。膨大な手書きスタイルにもかかわらず、このフォントスタックは、より非公式で毎日の手書きスタイルを採用する傾向があります。

CSSフォントスタック

 font-family : 'Segoe Print' , 'Bradley Hand' , Chilanka , TSCu_Comic , casual , cursive;

手書きフォントスタック

ブラウザで表示（記事ビュー /文字）

？オペレーティングシステム全体でレンダリングをプレビューします手書きフォントレンダリング
fontフォントの重みとメモ
フォントウェイト100 200 300 400 500 600 700 800 900
セゴープリント● ●
ブラッドリーの手 ●
チランカ●
tscu_comic ●
近日公開●

メモ

  • 近日公開予定はAndroidの下でCasuaryという名前を使用するため、このフォントはAndroidデバイスのみをターゲットにします。

上に戻る↑

追加機能

絵文字サポート

あなたのページにネイティブの絵文字を追加したいですか？これらのフォントをフォントスタックの最後に追加します。 

 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji'

アンチアリアシング

これらのCSSプロパティを使用して、アンチアリアシングでテキストをレンダリングします。 

 html {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

オペレーティングシステムのサポート

  • Windows 7以降
  • Android 10以降（8つのフォントで非常に限られています）
  • iOS 9.3以下
  • MacOS 10.9（Mavericks）または新しい
  • Linux（サンプリング12人の人気のディストリビューション）

上に戻る↑

プラグインと拡張機能

  • BorisanthonyによるTailwind CSS用の最新のフォントスタック
  • LittleBigThingによるWordPress用の最新のフォントスタック
  • 最新のフォントスタックは、WebStudioによってネイティブにサポートされています

上に戻る↑

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて