Google Fontsとは何ですか?
Google FontsはGoogleが提供する無料のWebフォントサービスです。1,500以上のフォントファミリーが利用可能で、CSSで簡単に読み込んでWebサイトに適用できます。商用利用も無料です。
フォントの読み込み方法は?
本ツールでフォントを選択すると、Google Fonts CDNから自動的にフォントが読み込まれます。ご自身のWebサイトで使う場合は、コード出力セクションに表示される@importタグまたはlinkタグをHTMLに追加してください。
比較モードの使い方は?
比較モードでは最大4つのフォントを並べて表示できます。各ドロップダウンからフォントを選択すると、同じプレビューテキストがそれぞれのフォントで表示され、見た目の違いを簡単に比較できます。
日本語フォントは使えますか?
はい。Noto Sans JP、Noto Serif JP、M PLUS Rounded 1c、M PLUS 1p、Kosugi Maru、Sawarabi Gothic、Sawarabi Minchoなど、人気の日本語Google Fontsを収録しています。
CSSコードはどのように出力されますか?
選択したフォントに対して、@import形式、linkタグ形式、font-family宣言の3種類のCSSコードが自動生成されます。それぞれコピーボタンでワンクリックコピーが可能です。
入力したデータは安全ですか?
はい。プレビューテキストや設定はすべてブラウザ内で処理され、サーバーには一切送信されません。個人情報が漏洩するリスクはありません。
複数のWebフォントを読み込む場合、ページの表示速度への影響はどのくらいですか?
一般的に1フォント追加ごと0.5~1秒の遅延が発生します。本ツールの比較モードで4フォントまで同時表示できるので、読み込み速度の違いを確認しながら最適なフォント数を決定できます。できるだけ細さのバリエーション(Light, Regular, Boldなど)で統一して、異なるフォントファミリーの数を減らすのがコツです。
Webフォントはすべてのブラウザで同じように表示されますか?
ほぼ同じですが、アンチエイリアス処理がOSによって微妙に異なります。特にWindows環境ではClearTypeという独自の処理が入るため、Mac・Linuxと比べて太く見えることがあります。本ツールの出力CSSに含まれる`-webkit-font-smoothing: antialiased`を追加することで、ブラウザ間の差を最小限にできます。
Google Fonts以外のフォントをプレビューできますか?
本ツールはGoogle Fontsの約1,400フォントから選択する仕様です。カスタムフォントのアップロード機能は現在ありませんが、出力されたCSSコードを編集して、@font-faceで別のWebフォントURLを指定することで対応可能です。
フォントの太さ(Font Weight)と斜体(Italic)を組み合わせる際の最良の設定は?
通常は「Regular + Bold」または「Light + Regular + Bold」の3段階がバランスが良く、ファイルサイズも抑えられます。Italicは見出し強調用に1~2種類追加する程度が目安です。本ツールで複数の太さを比較表示しながら、実際のプロジェクトでの使用シーン(段落、見出しなど)を想定して選ぶのがコツです。
スマートフォン表示では、デスクトップと異なるフォント選択をすべきですか?
可視領域の異なるスマートフォンでは、デスクトップより太めのフォントウェイト(Regularの1.1~1.2倍)を選ぶと読みやすくなります。本ツールで複数デバイスのプレビューは表示できませんが、出力CSSの`font-size`・`line-height`をメディアクエリで制御し、モバイルでは若干大きいサイズ(14~16px)を指定するのが推奨です。
Webフォントの読み込み遅延でテキストが表示されないのを防ぐには?
CSS の `font-display` プロパティを `swap` に設定することで、フォント読み込み完了まで代替フォント(System Font)で表示できます。本ツールの出力CSSにはこの設定が含まれていますが、ネットワークが遅い環境でも確実に文字が見えるので、ユーザー体験が向上します。