Webフォントプレビューアー
Google Fontsの日本語・英語フォントをリアルタイムでプレビュー。フォントサイズや色、行間などを自由にカスタマイズしてCSSコードを出力できます。
プレビュー
Noto Sans JP / 24px / 400 / line-height: 1.6 / letter-spacing: 0px
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
The quick brown fox jumps over the lazy dog. 0123456789
CSSコード
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
font-family: 'Noto Sans JP', sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 1.6;
letter-spacing: 0px;Webフォントとは
Webフォントは、Webサイトの表示に使用されるフォントをサーバーから配信する技術です。 従来はユーザーのPCにインストールされたフォントしか使えませんでしたが、Webフォントを使うことで、 デバイスや環境に関係なく統一されたタイポグラフィを実現できます。
Google Fontsは、Googleが提供する無料のWebフォントサービスです。1,700以上のフォントファミリーが利用可能で、 日本語フォントも多数収録されています。CDNから配信されるため、高速に読み込むことができます。
Google Fontsの使い方
Google Fontsの利用は非常に簡単です。HTMLの<head>タグ内に<link>タグを追加するか、 CSSで@importを使ってフォントを読み込みます。その後、CSSのfont-familyプロパティで指定するだけで使えます。
このツールでは、選んだフォントに対応する@importコードとfont-familyの指定を自動生成します。 コピーボタンでクリップボードにコピーして、そのままプロジェクトに貼り付けられます。
フォント選びのポイント
- 日本語フォントは「ゴシック体」と「明朝体」の2種類が基本。ゴシック体はWebサイトの本文に、明朝体は見出しやブランディングに適しています。
- 英語フォントはSerif（セリフ）、Sans-serif（サンセリフ）、Monospace（等幅）の3カテゴリ。用途に合わせて選びましょう。
- 行間（line-height）は1.5〜1.8が日本語テキストの読みやすい範囲です。このツールでスライダーを動かして最適な値を見つけてください。
- フォントの読み込みにはネットワーク通信が発生します。使用するフォントは必要最小限にし、display=swapを指定してパフォーマンスを最適化しましょう。
- 比較モードを活用して、候補のフォントを並べて見比べることで、最適なフォントを効率的に選べます。
関連記事
よくある質問
- Q. プレビューできるフォントは？
- Google Fontsで公開されている日本語・英語フォントをプレビューできます。Noto Sans JP、M PLUS Rounded、Zen Maru Gothicなど主要な日本語フォントも含まれます。
- Q. フォントの読み込みコードも取得できますか？
- はい、選択したフォントのCSSインポートコードを出力します。コピーしてHTMLやCSSファイルに貼り付けるだけで、Webサイトにフォントを適用できます。
- Q. 日本語フォントは何種類対応していますか？
- Google Fontsに登録されている日本語フォントに対応しています。ゴシック体、明朝体、手書き風など、用途に合わせてフォントを選べます。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。