Google Fontsのフォントの組み合わせ
用意された組み合わせを選ぶか、見出し用と本文用のフォントを1つずつ選びます。ビジネス名を入力して見た目を確認し、コードをコピーしましょう。
使い方相性のよいフォント
Google Fontsのフォントの組み合わせ: 用途
用意されたペア(エレガント、モダン、クラシック、力強い、繊細、やさしい、エディトリアル、すっきり、手作り風)から選ぶか、人気のGoogle Fonts 28種類を見出しのウェイトも含めて自由に組み合わせられます。プレビューでは実際にフォントを読み込み、ビジネス名と1段落の文章を表示します。
コードには、preconnect、使うウェイトだけを指定したGoogle Fontsのリンク、display=swap、見出しと本文用のCSSルールが含まれます。
使い方
- 用意されたペアか、2つのフォントを選びます。
- プレビュー用の見出しと本文を入力します。
- リンクとCSSをサイトにコピーします。
使うタイミング
- サイトのビジュアルアイデンティティを選ぶ。
- クライアントに見せる前にフォントを試す。
- 印象的な見出しと読みやすい本文を組み合わせる。
よくある質問
Google Fontsのフォントは無料ですか?
はい。Google Fontsのフォントはオープンソースで、商用サイトでも無料で使えます。
相性のよいフォントを2つ選ぶには?
簡単なルールは対比をつけることです。見出しには個性のあるフォント(セリフ体やディスプレイ体)、本文には読みやすいサンセリフ体を使います。よく似た2つのフォントは間違いに見えるので避け、3種類以上は使わないようにしましょう。
フォントでサイトは遅くなりますか?
フォントのウェイトごとにファイルが1つ増えます。使うウェイトだけを読み込んでください。コードにはdisplay=swapが含まれており、フォントの読み込み中はシステムフォントでテキストを表示します。また、preconnectで接続も高速化します。
GDPR(個人情報保護)はどうですか?
Googleから直接フォントを読み込むと、訪問者のIPアドレスがGoogleに送信されます。これを避けたい場合は、フォントをダウンロードして自分のサイトでホスティングしてください。
本当に無料?
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール:Tools123は無料です。