フリー フォント — トップ サイト、ライブ プレビュー、およびその使用方法
無料フォントの信頼できるソースを参照し、ライブ プレビューをテストし、クリーンな CSS をコピーし、Web フォントの正しい使用方法を学びます。オープンソース、無料商用、個人使用のコレクションが含まれています。
Google フォント
OFL高速グローバル CDN、サブセット、可変フォントを備えた最大のオープンソース ライブラリ。ウェブやアプリに最適です。ほとんどのファミリーは SIL オープン フォント ライセンスを使用しています。
フォントシェア (ITF による)
無料Indian Type Foundry によって無料で提供される高品質の書体。クリーンなファミリー、簡単な CDN 埋め込み、および多くの可変オプション。
フォントリス
無料のコマーシャル無料で商用利用できるフォントに焦点を当てた厳選されたディレクトリ。セルフホスティング用の Web フォント ジェネレーターが含まれています。
ムーバブルタイプのリーグ
OFLLeague Spartan や Raleway など、時代を超越したファミリーを持つ古典的なオープンソース ファウンドリです。ブランディングやエディトリアルに最適です。
ベルベティン
OFL独特の表示スタイルを備えた実験的なオープンソース書体。ポスター、文化、クリエイティブな作品に最適です。
集団的
OFLオープン ライセンスの下で高品質のフリー フォントをリリースしているコミュニティ ファウンドリです。強力な編集および表示オプション。
オープンファウンドリ
OFLテストツールとデザイン中心のプレゼンテーションを備えた厳選されたオープンソースフォントインデックス。新鮮な家族を発見するのに最適です。
1001 フォント
混合ライセンス無料で商用利用できるフィルターを備えた大規模なディレクトリ。家族ごとにライセンスを読んでください。多くは個人使用のみです。
ダフォント
個人使用個人的なプロジェクトやインスピレーションに最適な巨大なアーカイブ。ライセンスは多岐にわたります。各ダウンロードページをご確認ください。
アイコン フォント (Font Awesome、マテリアル アイコン、リミックス アイコン)
無料枠フォント パイプラインを使用した UI アイコンの場合。最新の SVG アイコン システムを考えてみましょう。ただし、アイコン フォントは依然として素早い追加に役立ちます。
ライブプレビューとCSSスニペット
ローカルのみ - 何もアップロードされていません機能比較 (スナップショット)
ライセンスは家庭によって異なります| サイト | オープンソース | 無料のコマーシャル | バリアブルフォント | CDN/ウェブフォント | 注意事項 |
|---|---|---|---|---|---|
| Google フォント | はい | はい* | はい | はい | 最大のライブラリ、高速 CDN |
| フォントシェア | 混合 | はい | 多くの | はい | 現代の家族 |
| フォントリス | 混合 | はい* | いくつかの | ジェネレータ | 商用利用向けに厳選 |
| 可動タイプのリーグ | はい | はい | いくつかの | セルフホスト | 時代を超越したクラシック |
| ベルベティン | はい | はい | いくつかの | セルフホスト | 実験展示 |
| ダフォント | いいえ | さまざま | 少し | いいえ | 個人的なプロジェクトに最適 |
Web 上でフリー フォントを使用する方法
- ライセンスを確認します。OFL およびその他の寛容なライセンスは、商用プロジェクトに最適です。一部のサイトでは、個人使用のみのフォントがリストされています。
- 配信の選択: 速度を上げるには CDN リンク、またはセルフホストを使用する @フォントフェイス コントロールとプライバシーのために。
- CLS が懸念される場合は、ヒーロー テキストに重要なフォントをプリロードします。フラッシュを回避するためにフォールバック スタックを定義します。
- リクエストを減らし、柔軟なウェイトを取得するために、利用可能な場合は可変フォントを優先します。
CDN の例
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>
セルフホストの例
@font-face{
font-family: "MyFont";
src: url("/fonts/MyFont-Variable.woff2") format("woff2");
font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
* ソース サイトで各ファミリーのライセンスを必ず確認してください。
よくある質問
Google Fontsは商用利用は無料ですか?
ほとんどは OFL の下でリリースされており、商用利用は無料です。ライセンスは各ファミリーページでご確認ください。
アイコン フォントと SVG アイコンのどちらを使用する必要がありますか?
SVG アイコンは、最新のアプリにとってより柔軟です。アイコン フォントは、迅速なセットアップや従来のパイプラインに引き続き役立ちます。
Web フォントはサイトの速度に影響しますか?
はい。使用 フォント表示: 交換、可能な場合はサブセットを作成し、ファミリーと重みを制限します。
最適な汎用フォントは何ですか?
Inter、Roboto、Source Sans 3 は多用途に使えます。見出しには Merriweather や Playfair などのセリフを組み合わせます。