ウェブサイトにおすすめのフォント：無料のGoogle Fonts 30種を実際のレイアウトでプレビュー

ウェブサイトに向くフォントとは、小さなサイズでも読みやすく、すばやく読み込め、ブランドに合うものです。プロダクトサイトならInterやGeist、読み物ならSource Serif 4やNewsreader、地域のお店ならRubikやNunitoが候補になります。ここでは無料のGoogle Fonts 30種をライブ表示し、ライセンス、可変軸、コピーして使えるCSSとあわせて紹介します。

2026年10月13日更新

実際のウェブサイトで十分に使える、Google Fontsの無料フォント30種を、得意な用途ごとに分けて紹介します。各フォントは見出し、段落、ボタンで表示し、ライセンス、可変フォントかどうか、収録ウェイト、フォールバックスタック、そのままコピーできるスニペットを添えています。内容は2026年10月にGoogle Fontsのカタログと、Google Fontsリポジトリ内のライセンスファイルで確認しました。

用途別のおすすめ

• SaaSやアプリ：すべてにInterかGeist、温かみのあるランディングページならPlus Jakarta Sans。
• ブログやメディア：本文にSource Serif 4かNewsreader、ナビゲーションにはサンセリフを合わせます。
• 地域のお店や事業：Rubik、Nunito、Work Sans。スマートフォンで読みやすく、親しみやすい印象です。
• 高級感やクラシックなブランド：見出しにPlayfair DisplayかEB Garamond、本文には落ち着いたサンセリフを合わせます。
• 多言語サイト：Noto Sans。

自分のテキストで試す

下に入力すると、このページのすべてのプレビューのサンプル文が置き換わります。フォントはこのセクションを開いたときにGoogle Fontsから読み込まれます。それまでは各プレビューにフォールバックスタックが表示されます。これは、ウェブフォントのダウンロード中に訪問者が一瞬目にする表示と同じです。

30フォントの一覧

30種すべてがSIL Open Font License 1.1で公開されています。このライセンスでは商用利用、ウェブサイトへの埋め込み、セルフホストが認められ、フォントファイル単体で販売しないこと、改変版に予約フォント名を使わないことを守れば改変もできます。Google Fontsの一部のファミリーは別のオープンライセンスを採用しており、Apache License 2.0のもの（例：Permanent MarkerやSpecial Elite）や、Ubuntu Font Licenceを使うUbuntuファミリーがあります。公開前に必ずfonts.google.comの各ファミリーのページでライセンスを確認してください。

<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Figtree:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Merriweather:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Merriweather", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Lora:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lora", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Playfair Display", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Serif 4", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "EB Garamond", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Fraunces:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Fraunces", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Newsreader:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Newsreader", Georgia, "Times New Roman", serif;

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Work+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:[email protected]&display=swap" rel="stylesheet">

/* CSS */
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

Google Fontsの読み込み方

ページの<head>内、自分のスタイルシートより前にこれらの行を入れます。2つのpreconnectヒントにより、ブラウザーはスタイルシートのホストとフォントファイルのホストへの接続を早めに開始できます。フォントファイルは別ドメインから配信され、CORSモードで取得されるため、2つ目のヒントにはcrossoriginが付いています。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Source+Serif+4:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; }

css2のURLの読み方

• family=Inter:[email protected]は、可変フォントのウェイト範囲を指定します。範囲は実際に使う分に絞りましょう。それでもブラウザーはサブセットごとに1ファイルをダウンロードします。
• family=Lato:wght@400;700は、2つの静的ウェイトを個別に指定します。静的ファミリーでは、指定したウェイトごとにファイルが1つ増えます。
• ital,wght@0,400..700;1,400..700はイタリックのスタイルを追加します。軸名はアルファベット順で、小文字を大文字より先に書きます。
• 複数のファミリーを1回のリクエストで読み込むには、family=を繰り返します。
• display=swapは、返される@font-faceルールにfont-display: swapを設定します。テキストは見えないままにならず、まずフォールバックフォントで表示され、ウェブフォントが届いた時点で切り替わります。
• text=Helloは、指定した文字だけを含むファイルを返します。ほかで使わないフォントでロゴの文字を組む場合に便利です。

font-displayのオプション

セルフホスト

これらのフォントはオープンライセンスなので、Googleではなく自分のドメインからファイルを配信できます。そうする理由は、サードパーティへの接続が1つ減ること、キャッシュを完全に制御できること、そしてプライバシーです。Googleのサーバーへのリクエストでは訪問者のIPアドレスがGoogleに送られるため、ヨーロッパのサイト運営者の中にはこれを避ける人もいます。方法は次のとおりです。

• fonts.google.comのファミリーのページからダウンロードし、WOFF2ファイルに変換するかそのまま使って、自分で@font-faceルールを書きます。
• JavaScriptプロジェクトでは、Fontsourceからファミリーをインストールし（例：npm install @fontsource-variable/inter）、エントリーファイルでimportします。
• Next.jsプロジェクトではnext/font/googleを使えます。ビルド時にファイルをダウンロードし、自分のドメインから配信します。

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;      /* the variable range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

セルフホストする場合は、ファーストビューのテキストに必要な1ファイルだけを<link rel="preload" href="/fonts/inter-latin-var.woff2" as="font" type="font/woff2" crossorigin>でプリロードします。複数のフォントをプリロードすると、画像やスクリプトと帯域を奪い合います。

可変フォントについて

可変フォントは、ウェイトごとに1ファイルではなく、1つ以上の軸に沿った連続的な範囲を1ファイルに収めたものです。ここで紹介する30種のうち28種が可変フォントで、PoppinsとLatoは静的フォントです。

• ウェイト（wght）は通常のfont-weightプロパティで制御し、範囲内ならどの数値も使えます。font-weight: 650も有効です。
• 幅（wdth）はここではRoboto、Open Sans、IBM Plex Sans、Noto Sans、Archivo、Merriweatherが持つ軸で、font-stretchにパーセントで対応します。例：font-stretch: 85%。
• オプティカルサイズ（opsz）はInter、DM Sans、Source Serif 4、Newsreader、Merriweather、Frauncesが持つ軸で、表示サイズに合わせて字形を調整します。font-optical-sizingの初期値がautoなので、ブラウザーはフォントサイズから自動的に適用します。この軸を使うにはURLで指定します（例：family=Inter:opsz,[email protected],100..900）。
• FrauncesのSOFTやWONKのようなカスタム軸は、font-variation-settings: "SOFT" 100, "WONK" 1;で設定します。ウェイト、幅、傾きには標準プロパティがあるので、そちらを使いましょう。font-variation-settingsの値はルール間で合成されないためです。
• 可変フォントのファイルは、静的ウェイト1つ分より大きくなります。おおむね3つ以上のウェイトを使う場合や、中間のウェイトで細かく調整したい場合に元が取れます。

h1 { font-weight: 780; font-stretch: 90%; }
.lede { font-weight: 350; }
.fun-heading { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; }

ウェブセーフフォントとシステムフォントスタック

「ウェブセーフ」フォントとは、ほぼすべてのWindowsとMacにインストールされているフォントで、ダウンロードが不要です。Android、Linux、すべてのiPhoneにあるとは限らないため、フォントスタックは必ずsans-serifやserifのような総称ファミリーで終えます。

システムフォントスタックはさらに一歩進んで、各OS自身のインターフェースフォントを使います。Apple製デバイスではSan Francisco、WindowsではSegoe UI、AndroidではRoboto、Linuxでは通常Notoなどの標準フォントです。読み込みコストがかからず、ネイティブな見た目になります。執筆時点でおすすめのスタックは次のとおりです。

/* Sans: the operating system's interface font */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;

system-uiは現在の主要ブラウザーすべてでサポートされています。-apple-systemとBlinkMacSystemFontはApple製デバイスの古いブラウザーにしか効かないため、それらをサポートしないなら削除してかまいません。ui-serifとui-monospaceはすべてのブラウザーで認識されるわけではないため、各スタックの後ろに名前付きのフォントが続きます。絵文字がカラーで表示されるよう、末尾に絵文字フォントを置いています。

この段落はシステムのサンセリフスタックで表示されているため、お使いのデバイスのインターフェースフォントが見えます。

パフォーマンスのポイント

• ファミリーとウェイトを減らす。静的ウェイト、イタリック、追加のファミリーは、それぞれファイルが1つ増えます。2ファミリー、または可変ファミリー1つとそのイタリックで、ほとんどのサイトは足ります。
• WOFF2を使う。最も圧縮率の高いウェブフォント形式で、現在のすべてのブラウザーが対応しています。Google Fontsは自動的にこの形式で配信します。
• 言語ごとにサブセット化する。Google Fontsのスタイルシートはすでにunicode-rangeで各ファミリーをサブセットに分けているため、英語だけのページはラテン文字のファイルしかダウンロードしません。セルフホストでも同じようにしましょう。
• 切り替え時のレイアウトシフトを減らす。フォールバックとウェブフォントの幅が違うと、フォントが届いた時点でテキストが組み直されます。似た比率のフォールバックを選ぶか、フォールバック用の@font-faceでsize-adjust、ascent-override、descent-overrideを使って調整します。next/fontや一部のビルドツールは、これらの値を自動で生成します。
• テキストを隠さない。font-display: swapやoptionalがないと、ブラウザーはフォントのダウンロード中しばらくテキストを表示しないことがあり、ページが読めるようになるまでの時間が延びます。
• 推測せずに計測する。フォントを変える前後に、ラボテストでページを計測しましょう。PageSpeed Insightsのガイドで、フォントがどの数値に影響するかを解説しています。

フォントの組み合わせ例

はっきり違いがあり（セリフとサンセリフ、幅広のディスプレイ書体とシンプルな本文書体など）、似たエックスハイトや雰囲気のような共通点もあるフォントを組み合わせます。ファミリーは2つまでにしましょう。以下の組み合わせは、このページのフォントだけを使っています。

さらに多くの組み合わせを並べて試すにはフォント組み合わせツールを使ってください。書体に合う配色はウェブサイトの配色、これらのフォントを使った既成のレイアウトはヒーローセクションのコンポーネントをご覧ください。

よくある質問

ウェブサイトに最適なフォントは？

唯一の正解はありませんが、Inter、Source Sans 3、Open Sansは小さなサイズでもはっきり読めるため、本文用として信頼できる選択です。見出しには、Playfair Display、Fraunces、Space Groteskなど、ブランドに合った個性のある書体を選びましょう。

Google Fontsは商用利用できますか？

はい。Google Fontsのすべてのファミリーはオープンライセンスで、大半がSIL Open Font License 1.1、一部がApache License 2.0とUbuntu Font Licenceです。3つとも、ウェブサイト、アプリ、印刷物での商用利用を認めています。使う前に各ファミリーのページでライセンスを確認してください。

ウェブサイトで使うフォントはいくつが適切？

通常は1〜2ファミリーです。見出し用と本文用に1つずつ、または1つのファミリーでウェイトを変えて両方に使うのが一般的です。ファミリーやウェイトを増やすたびに、ブラウザーがダウンロードするファイルが増えます。

可変フォントとは？

可変フォントとは、ウェイト、幅、オプティカルサイズなどの軸に沿った連続的なスタイルの範囲を1つのファイルに収めたフォントです。レギュラー、ミディアム、ボールドを別々のファイルで読み込む代わりに、1ファイルを読み込めば範囲内のどのウェイトでも使えます。

ウェブセーフフォントとは？

Arial、Verdana、Georgia、Times New Romanのように、ほぼすべてのWindowsとMacにすでにインストールされているフォントで、ダウンロードが不要です。すべてのスマートフォンやLinuxにあるとは限らないため、フォントスタックは必ずsans-serifのような総称ファミリーで終えましょう。

Google Fontsはセルフホストすべき？

ライセンス上は可能です。セルフホストすると、サードパーティのドメインへの接続がなくなり、キャッシュを自分で制御でき、訪問者のIPアドレスがGoogleに渡りません。Google Fontsから読み込むほうが簡単で、サブセット化も任せられます。どちらの場合も、WOFF2とfont-display: swapを使いましょう。

見出しのテキスト

会社名や見出し

段落のテキスト

自社ホームページの一文

ボタンのラベル

今すぐ予約

見出しのサイズ：{n}px

サンプルをリセット

無料で始める · クレジットカード不要

関連: ガイド｜Webマーケティングと集客を学ぶ

• 無料SVGアイコンライブラリ比較
• BIMIレコード：メールの横にロゴを表示する方法
• Bing Places for Business：わかりやすい設定ガイド
• Bootstrap 5のサンプル集とTailwindでの書き方
• Brave Search APIキー：取得して最初の検索を行う
• ブルータリズムのWebデザイン：編集できる実例
• ブログ付きの事業サイト例：問い合わせにつなげる方法
• 開封されるビジネスメールの件名の書き方

製品

• AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
• ホワイトラベル プラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
• エンタープライズ：SSO、個別の SLA、専任サポート
• 開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

• 制作会社・代理店向け：自社ブランドで再販
• フリーランス向け：自分ブランドのビルダーを持つ
• ホスティング事業者向け：サービスにビルダーを追加
• SaaS プラットフォーム向け：API でサイト作成を組み込み
• スタートアップ向け
• 金融サービス向け
• 医療・ヘルスケア向け

機能

• ドラッグ＆ドロップエディター
• SEO ツール内蔵
• 独自ブランディング
• クライアント用ダッシュボード
• 再販向け請求管理（Stripe Connect）

リソース

• ブログ
• ヘルプセンター
• 無料ビジネスツール
• ホームページ テンプレート
• テンプレート集
• サイト事例
• ガイド
• 比較
• 代替サービス
• おすすめ
• レビュー
• 料金ガイド
• 用語集・ガイド
• 連携サービス
• 開発者向け
• ベンチマーク
• Windows アプリ

会社情報

• 会社概要
• 料金
• パートナープログラムに申し込む
• お問い合わせ
• 採用情報
• セキュリティ
• プライバシーポリシー
• 利用規約

サイトマップを見る