$ プリセット
# 見出しフォント
# 本文フォント
$ プレビュー
</> コード
$ フォントペアジェネレーターの使い方
プリセットペアを選ぶことから始めてください — これらは一緒にうまく機能する、試行錯誤を経た組み合わせです。またはカスタムで: ドロップダウンから見出しと本文のフォントを選び(すべてGoogle Fontsから)、サイズとウェイトを調整し、プレビューがライブで更新されるのを見ます。記事、ヒーロー、カードのプレビューを切り替えて、ペアが異なるコンテキストでどのように動作するかを確認してください。満足したら、importまたはCSSをコピーしてプロジェクトに貼り付けます。
良いフォントペアリングとは
最高のペアは衝突せずにコントラストを作り出します。一般的なパターンは、見出しにセリフまたはディスプレイフォント、本文にクリーンなサンセリフを組み合わせることです。見出しが注意を引き、本文は読みやすさを保ちます。あまりにも似ている2つのフォントをペアにすることは避けてください — 目を細めて区別できない場合、見出しにもっと個性のあるものを選んでください。
アプリにとって重要な理由
App Storeのスクリーンショット、ランディングページ、アプリ内UIはすべて、一貫性のあるよくペアになったタイポグラフィの恩恵を受けます。選ぶフォントがトーンを設定します — 遊び心がある、プロフェッショナル、ミニマル、大胆。早い段階でペアリングを正しく行うことで、後の再設計作業を節約します。このツールを使って素早く実験し、正確なCSSをプロジェクトに取り込んでください。
$ FAQ
無料ですか?
はい — 完全無料、登録なし、制限なし。完全にブラウザ内で動作し、Google Fontsから直接フォントを読み込みます。
これらのフォントをアプリで使えますか?
ここのすべてのフォントはGoogle Fontsからで、オープンソースです。アプリ、ウェブサイト、印刷物 — どこでも使えます。詳細はGoogle Fontsで各フォントのライセンスを確認してください(ほとんどがSIL Open Font License)。
プロジェクトにフォントをどう追加しますか?
コードセクションから<link>タグまたは@import行をコピーしてHTMLまたはCSSに追加します。次に、CSS出力に表示されるfont-family宣言を使用します。
一部のウェイトが利用できないとして表示されるのはなぜですか?
すべてのGoogle Fontsがすべてのウェイトをサポートしているわけではありません。ウェイトのチップは、選択したフォントが実際に提供するウェイトのみを表示します。