【2024年版】Webセーフで美しいフォント30選

美しいサイトを作成するのに何百種類ものフォントを使う必要はありません。しかし、使用するフォントが全ての人にとって見やすいものであるように気をつける必要はあります。そこで便利なのがWebセーフなフォントです。

完全無料で利用でき、別途、ダウンロードしなくても問題なく訪問者に表示されるwebセーフフォントであれば完璧です。

今回は美しいwebセーフフォント31選をご紹介するとともに、WordPressサイトで使用する方法をご紹介します。

次のリンクから関心のある項目をお選びいただくか、直接webセーフフォント一覧にお進みください。

Webセーフなフォントとは

異体字も含めると、インターネット上には65万種類以上のフォントが存在します。その中でも、大半のウェブブラウザとOSが対応しているフォントはWebセーフとみなされています。フォントファイルがOSに含まれているため、サイト訪問者はサーバーからフォントをダウンロードする必要がありません。

その代表例は、たくさんの派生フォントを生んだ、インターネット上のあちこちで使われているArialです。

Webセーフなフォントを選ぶ重要性

事実として、大半のユーザーがモバイル端末でもデスクトップでも現在Google Chromeを利用しています。しかし、だからと言ってWebセーフなフォントが過去のものだとは言えません。

実際、対応しているフォントはOS、それもユーザーがその時点で使用しているバージョンによって異なります。そのため、最新のWindows 10にしか対応していないフォントを使用してサイトをデザインした場合、大半のユーザーには別のフォントが表示されることになります。

さらに、自分でダウンロードしたフォントを使用した場合、または外部に保存されたフォントを使用した場合は、サイトの速度が遅くなってしまうことがあります。そのため、Webセーフフォントに変えることでサイトを高速化できる可能性も期待できます。これは大きなメリットです。約70%の消費者がページの読み込み速度が購入を行うかどうかの判断に影響すると回答しています。

Google FontsはWebセーフなのか

GoogleフォントはもともとOSに対応しているわけではないため、定義上Webセーフなフォントではありません。外部サービスであるGoogleが自社のサーバーで管理しているフォントであるため、これはWebフォントと呼ばれます。紛らわしいですが、その違いは、Googleフォントを表示するのにブラウザがファイルを読み込まなければならないという点です。

一方、Webセーフなフォントでは、大半の端末にそのファイルが備わっています。しかし、「セーフ」という言葉がないからダメ、というわけでもありません。Googleフォントはサイトのデザイン性を高めるのに使用しても安全です。ただし、注意点として、外部のサーバーへのHTTPリクエストが増加するため、ページの読み込み速度を遅くしてしまう可能性は常にあります。

おすすめのWebセーフフォント31選

サイトのデザインに使える美しいwebセーフなフォントを30以上集めました。

早速見てみましょう。

1. Arial

Arialは本文にも見出しにも適したクラシックなセリフ体のフォントです。随分前からウェブデザインにおいて必要不可欠な存在となっています。とは言え、近年ではメインの書体というよりもフォントスタックの中のフォールバックとして使用されがちです。

おすすめのフォントスタック

フォントファミリー： Arial、Helvetica Neue、Helvetica、sans-serif

2. Baskerville

Baskervilleは、1750年にJohn Baskerville氏が活字書体として開発した比較的厚みのあるセリフ体のフォントです。薄いストロークと厚みのあるストロークを織り交ぜることで、通常のセリフ体のシャープな先端を柔らかい印象にした、バランスのとれたデザインが特徴です。AppleとMicrosoftの近年のOSで対応しています。

おすすめのフォントスタック

フォントファミリー：Baskerville、Baskerville Old Face、Garamond、Times New Roman、serif

3. Bodoni MT / Bodoni 72

Bodoni MTは多くのサイトでは見出しよりも本文に適した、Times New Romanと同様のセリフ体です。Bodoni MTはMicrosoft 10やそれ以前のバージョンのいくつかでデフォルトで利用できます。Bodoni 72はmacOS Sierra以降のバージョンで利用できます。

おすすめのフォントスタック

フォントファミリー：Bodoni MT、Bodoni 72、Didot、Didot LT STD、Hoefler Text、Garamond、Times New Roman、serif

4. Calibri

CalibriはMicrosoft Office 2007のリリース以来、Microsoftの標準サンセリフ体フォントとなっています。柔らかくモダンなデザインで、丸みの帯びた角が通常のサンセリフ体の機械的な雰囲気をより温かみのあるものにしています。

おすすめのフォントスタック

フォントファミリー：Calibri、Candara、Segoe、Segoe UI、Optima、Arial、sans-serif

5. Calisto MT

Calisto MTは他の似たような書体と比べるとやや柔らかく、セリフが目立たないセリフ体のフォントです。近年のWindowsのバージョンの大半に含まれているMicrosoftの標準フォントです。macOSとiOSではBookman Old Styleに当たります。

おすすめのフォントスタック

フォントファミリー：Calisto MT、Bookman Old Style、Bookman、Goudy Old Style、Garamond、Hoefler Text、Bitstream Charter、Georgia, serif

6. Cambria

Cambriaは多くの場合大文字でもセリフがほとんど分からないほどの、より一層柔らかなセリフ体です。そのため、よりお洒落な印象を与えつつも、画面上での読みやすさも抜群です。

おすすめのフォントスタック

フォントファミリー：Cambria、Georgia、serif

7. Candara

Candarはサンセリフ体のフォントです。MicrosoftのClearTypeフォントコレクションの一つです。macOSとiOSではOptima Regularに当たります。不均一なストロークの太さにより、他のサンセリフ体と比べるとお洒落さや、企業らしさがやや欠けていると言えます。

おすすめのフォントスタック

フォントファミリー：Candara、Calibri、Segoe、Segoe UI、Optima、Arial、sans-serif

8. Century Gothic

Century Gothicは非常にすっきりした、バランスのとれたデザインの幾何学的なサンセリフ体のフォントです。ウェブでの使用、特に見出しや小見出しにおすすめです。もともと、Futuraの競合としてデザインされたフォントです。大半のMicrosoftとAppleのOSに組み込まれています。

おすすめのフォントスタック

フォントファミリー：Century Gothic、CenturyGothic、AppleGothic、sans-serif

9. Consolas

Consolasはユニークなデザインを採用したサンセリフ体のフォントです。全ての文字が同じ幅になっているため、大文字の「I」と小文字の「l」にしかセリフがありません。ClearTypeコレクションの一つです。

おすすめのフォントスタック

フォントファミリー：Consolas、monaco、monospace

10. Copperplate Gothic

Copperplate Gothicはゴシック体からインスピレーションを受けたフォントで、文字のいくつかにわずかに装飾要素のセリフが施されています。ゴート語のルーン文字よりインスピレーションを受けているため、小文字のフォントは存在しません。

おすすめのフォントスタック

フォントファミリー：Copperplate、Copperplate Gothic Light、fantasy

11. Courier New

Courier Newは他のセリフ体、サンセリフ体のフォントと比べると通常の文字が非常に薄い、等幅のスラブセリフフォントです。MicrosoftとAppleのコンピューター、モバイル端末両方のほとんど全てに搭載されています。

おすすめのフォントスタック

フォントファミリー：Courier New、Courier、Lucida Sans Typewriter、Lucida Typewriter、monospace

12. Dejavu Sans

Dejavu Sansはすっきりしたまっすぐな線のサンセリフ体フォントで、ArialやVerdanaなどの正統派フォントを思い起こさせます。

おすすめのフォントスタック

フォントファミリー：Dejavu Sans、Arial、Verdana、sans-serif

13. Didot

Didotは19世紀にフランスのディド家により印刷事業に利用された書体であるDidotを元にして作られたフォントです。Appleの中心的なフォントで、AppleのOSや端末の大半に組み込まれています。

おすすめのフォントスタック

フォントファミリー：Didot、Didot LT STD、Hoefler Text、Garamond、Calisto MT、Times New Roman、serif

14. Franklin Gothic

Franklin Gothicは他のフォントの太字版かと思えるほど非常に線の太いサンセリフ体のフォントです。元となった書体は20世紀初頭にアメリカン・タイプ・ファウンダーズ社により作られました。見出しには良い選択肢ですが、本文テキストには不向きです。

おすすめのフォントスタック

フォントファミリー：Franklin Gothic、Arial Bold

15. Garamond

Garamondは16世紀パリの活字鋳造業者クロード・ギャラモンの生み出した書体を元にしたセリフ体フォントです。Times New Romanなどの標準的なセリフ体と比べるとより柔らかく、丸みの帯びた角をしているのが特徴です。MicrosoftとApple OSの近年のバージョンにはそれぞれ独自のGaramondフォントがあります。

おすすめのフォントスタック

フォントファミリー：Garamond、Baskerville、Baskerville Old Face、Hoefler Text、Times New Roman、serif

16. Georgia

Garamondに非常に近いフォントであるGeorgiaもまた、丸みを帯びた角を多用した、極めて温かな印象のセリフ体のフォントです。Microsoft用に1996年に作られ、現在でもMicrosoftで最も広く使用されているフォントの一つです。実質全てのWindowsとmacOSのバージョンに対応しています。

おすすめのフォントスタック

フォントファミリー：Georgia、Times、Times New Roman、serif

17. Gill Sans

Gill Sansはシャープですっきりした線がお洒落な印象を与える、サンセリフ体のフォントです。文字のコントラストが少なく、文字の間隔も狭いため、デフォルトでは段落のテキストへの使用には不向きです。しかし、上の例のように見出しにはぴったりです。ほとんどのiOS、macOS、Windows端末に対応しています。

おすすめのフォントスタック

フォントファミリー：Gill Sans、Gill Sans MT、Calibri、sans-serif

18. Goudy Old Style

Goudy Old Styleは力強いセリフと歴史ある雰囲気の柔らかなオールドスタイル・セリフです。ピリオドは多くのセリフフォントで使用される通常の丸型ではなく、ダイヤモンド型です。Windowsの近年のバージョンの大半に組み込まれています。

おすすめのフォントスタック

フォントファミリー：Goudy Old Style、Garamond、Big Caslon、Times New Roman、serif

19. Helvetica

Helveticaは今まで登場したフォントの中でも最も有名なものかもしれません。また、ドキュメンタリーが製作された唯一のフォントでしょう。19世紀後半〜20世紀初頭のスイスとドイツのフォントから影響を受けたお洒落なサンセリフ体のフォントです。

柔らかく丸みを帯びた温かみのあるデザインというよりも、バランスのとれた、すっきりとした線と形状が特徴です。本文にも見出しにも適した数少ないフォントの一つです。全てのAppleの端末に搭載されており、MicrosoftにはHelveticaのMicrosoft版であるArialが標準装備されています。

おすすめのフォントスタック

フォントファミリー：Helvetica Neue、Helvetica、Arial、sans-serif

20. Impact

Impacはテキスト、大文字、小文字の書体全てがデフォルトで非常に太く大胆なデザインのリアリスト・サンセリフ体です。大胆な太字は通常のテキストとの対比で際立つため、見出しやCTA（コールトゥアクション）には適していますが、本文テキストには不向きです。

1998年当初のウェブ用コアフォントパッケージの一つでした。現在でもApple、Windows両方のコンピューターやモバイル端末に広く対応しています。

おすすめのフォントスタック

フォントファミリー：Impact、Charcoal、Helvetica Inserat、Bitstream Vera Sans Bold、Arial Black、sans serif

21. Lucida Bright

Lucida BrightはMicrosoft用に1991年に制作された、MicrosoftのLucidaフォントファミリーのセリフ体です。例えば、大文字の「T」や「L」に見られる、より角ばって、しっかりとしたセリフが特徴です。Windowsの近年のバージョンの大半にデフォルトで含まれていますが、macOSには通常のサンセリフ体であるLucida Grandeしかないため、フォールバックフォントとしてGeorgiaを使用するのが賢明です。

おすすめのフォントスタック

フォントファミリー：Lucida Bright、Georgia、serif

22. Lucida Sans

Lucida SansはLucidaフォントファミリーのセリフフォントを補完することを目的に作られた、明瞭なヒューマニスト・サンセリフ体のフォントです。HelveticaやArialなどの、よりすっきりとしたサンセリフ体と比べ、ストロークの太さに様々な種類があります。これにより、未来的で機械的な印象が和らぎ、より遊び心のある印象になっています。見出しやCTAにぴったりなフォントです。

おすすめのフォントスタック

フォントファミリー：Lucida Sans、Helvetica、Arial、sans-serif

23. Microsoft Sans Serif

Microsoft Sans SerifはWindows 2000にて導入されたサンセリフ体のフォントです。Helv（Helveticaの略）の名でも知られていたMS Sans Serif fontの後継フォントです。現代の代表的なサンセリフ書体であるHelveticaを元にして作られています。

ストロークの太さが均一なすっきりとしたフォントです。清潔感があり、プロフェッショナルな印象を与えます。見出しや法人サイトにぴったりです。初期ウェブフォントの一つとして搭乗し、現在でもMicrosoftの全ての端末で標準的なフォントです。

おすすめのフォントスタック

フォントファミリー：MS Sans Serif、sans-serif

24. Optima

Optimaはストロークの太さが様々で対称性もまちまちなヒューマニスト・サンセリフフォントです。それにより、従来のサンセリフフォントの大量生産の雰囲気を覆す、手書きのような印象を与えます。Appleの標準的なサンセリフ体の一つで、大半のiOSとmacOSの端末に対応しています。MicrosoftではSegoeにあたります。

おすすめのフォントスタック

フォントファミリー：Optima、Segoe、Segoe UI、Candara、Calibri、Arial、sans-serif

25. Palatino

Palatinoはニュースサイトや雑誌にぴったりなオールドスタイルセリフです。とは言え、ストロークの太さや形状が文字により異なり、GeorgiaやTimes New Romanよりも均一でないフォントです。

このデザインにより「k」、「l」、「x」、「y」、「z」などのシャープな形状の文字が柔らかい印象になっています。また、他のセリフ体と比べ若干線が太いのも特徴です。この二つの特徴により、少し温かみのあるフォントとなっています。PalatinoはWindowsとAppleの大半の端末に組み込まれています。

おすすめのフォントスタック

フォントファミリー：Palatino、Palatino Linotype、Palatino LT STD、Book Antiqua、Georgia、serif

26. Perpetua

Perpetuaは、エリック・ギルというイギリスの彫刻家により制作されたユニークなデザインのセリフフォントです。小文字の「e」や数字の「3」をご覧いただくと分かるように、ストロークの太さの強弱が際だっています。この特徴が、独創的で、少々遊び心のある印象を与えます。Windowsで主に使用されるフォントですが、非常に近いフォントであるBaskervilleはAppleのほとんどの端末で標準となっています。

おすすめのフォントスタック

フォントファミリー：Perpetua、Baskerville、Big Caslon、Palatino Linotype、Palatino、serif

27. Rockwell

Rockwellは非常に太くほぼ均一な、スクエアセリフまたはスラブセリフ体に分類されるフォントです。見出しやCTAには向いていますが、太い書体は本文のテキストには不向きです。Microsoft Windowsの近年のバージョンの大半に搭載されています。

おすすめのフォントスタック

フォントファミリー：Rockwell、Courier Bold、Courier、Georgia、Times、Times New Roman、serif

28. Segoe UI

Segoe UIはSegoeフォントファミリーの代表的なサンセリフ体です。Microsoftの多くのアプリケーションに加え、Microsoft製品のマーケティング素材にも広く使用されています。

対称的でストロークの太さがほぼ均一なお洒落フォントです。Segoe UIはMacにはありませんが、これに相当するフォントであるHelvetica Neueは同じようなデザインと印象になっています。

おすすめのフォントスタック

フォントファミリー：Segoe UI、Frutige、Dejavu Sans、Helvetica Neue、Arial、sans-serif

29. Tahoma

TahomaもまたMicrosoftの開発したサンセリフフォントです。Segoe UIよりも若干太い文字で、小文字、ピリオド、その他の記号に四角いドットを使用しています。

すっきりとした均一なフォントで、本文にも見出しにも違和感なく使用できます。全てのMicrosoft端末にある他、実質的には全てのApple端末にも搭載されています。

おすすめのフォントスタック

フォントファミリー：Tahoma、Verdana、Segoe、sans-serif

30. Trebuchet MS

Trebuchet MSもまたMicrosoftの制作したサンセリフフォントです。Microsoftの作った最初のウェブ用コアフォントパッケージに含まれていたフォントの一つです。現在でも実質、全てのMicrosoft、Apple端末に組み込まれています。文字は他のサンセリフフォントと比べスリムで、段落や本文に適しています。

おすすめのフォントスタック

フォントファミリー：Trebuchet MS、Lucida Grande、Lucida Sans Unicode、Lucida Sans、sans-serif

31. Verdana

すっきりしたサンセリフフォントのVerdanaは1996年から使用されているMicrosoftの標準フォントです。ストロークの太さはサンセリフ体にしては細く、スリムで読みやすい文字となっています。段落内のテキストや見出しに難なく使えます。実質全てのAppleとWindowsの端末に対応しています。

おすすめのフォントスタック

フォントファミリー：Verdana、Geneva、sans-serif

Webセーフな筆記体フォント

Webセーフな筆記体のフォントを使いたい場合、選択肢はそれほど多くありません。具体的には次のようなものがあります。

• Segoe script
• Rage
• Script MT
• Snell Roundhand
• Lucida Handwriting

AppleとMicrosoftの全ての端末に対応した筆記体フォントは存在しません。サイトのユーザービリティにおいて可読性は大変重要です。そのため、本文テキストに筆記体を使用するのは避けたほうが良いでしょう。

段落には可読性の高い文字を使いましょう。そうでないと視覚障害を持ったユーザーがサイト上の文章を読むのがとても困難になってしまいます。これは、高い直帰率と全体的なコンテンツへのエンゲージメントの減少につながります。

Webセーフなサンセリフフォント

「Sans」はフランス語で「なし」を意味する単語です。つまり、「sans serif」は「セリフなし」という意味です。セリフとは、文字のストロークの先につく装飾のことです。例えば、新聞や雑誌の見出しでよく見られる、大文字の「T」の上部の線の下に付いた小さな垂直の線がセリフです。サンセリフフォントはインターネット上で最も一般的で人気のフォントなので、たくさんの選択肢があります。

• Arial
• Calibri
• Candara
• Century Gothic
• Consolas
• Dejavu Sans
• Franklin Gothic
• Gill Sans
• Helvetica
• Lucida Sans
• MS Sans Serif
• Neue Helvetica
• Optima
• Segoe UI
• Tahoma
• Trebuchet MS
• Verdana

Webセーフなフォントの入手方法

Webセーフフォントの最大の魅力はダウンロードする必要がないことです。すでに全ての訪問者のOSに備わっているため、CSSを用いてコードを記述するだけでOKです。HTMLやCSS、その他コードの記述に関する知識がない場合は、少しハードルが高く感じるかもしれません。

しかし、実際には難しいことではないのでご安心ください。次の章で順番に手順をご説明します。

WordPressサイトにWebセーフなフォントを追加する方法

WordPressの最新のTwenty Twentyテーマをご利用の場合、WordPressのカスタマイザーにCSSを追加することでフォントを編集できます。

「外観」>「カスタマイズ」のメニューをクリックし、「追加CSS」のタブを開きます。

次に、Chromeの開発者ツール（もしくは他のブラウザの同様のツール）を使い、変更したいテキストのセレクタを特定します。

例えば、ブログ記事の見出しを検証します。

このテーマでは見出しに標準的な「entry-title」のセレクタが使用されていることが分かります。また「font-family」属性を探し、テーマ内にて、テキストがどのレベルでスタイリングされているか調べることもできます。

Twenty Twentyでは見出しに特定のフォントが使用されていないため、「font-family」セレクタを使用し、見出しのフォントを簡単に変更することができます。

例えば、見出しのフォントをImpactに変更したい場合、次のコードを記述します。

h1.entry-title { font-family: Impact, Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; }

こちらを追加CSSに記述し、「公開」をクリックすると、サイトに反映されます。

詳しくはWordPressでフォントを変更する方法をご覧ください。サイトをHTMLとCSSを使って構築した方はソースコードから直接編集できます。

例えば、HTMLドキュメント内にスタイルタグを使用してCSSコードを各ページに適用している場合、そのドキュメントからfont-family属性を編集することができます。

ページ内全てのテキストのフォントを変更したい場合は、「body」セレクタを使います。特定のテキストのフォントを変更したい場合は、特定のセレクタを用います。

サイトの作成にテンプレートを使用した場合、CSSは個別のスタイルシートに記述されている可能性が高いです。その場合、一つのファイルを編集するだけでサイト全体のフォントを変更できるのでとても便利です。

その場合、スタイルシートのファイル（通常はstyle.cssのような名前）を探します。そして、その中からサイトのフォントや書体を定義している箇所を探します。

通常、該当箇所はファイルの上の方にあります。そうでない場合、お使いのコードエディタを使って「font-family」と検索してください。

まとめ

テーマとプラグインと同じように、フォントにも無限の選択肢があります。

Webセーフなフォントにはセリフ体、サンセリフ体、等幅フォント、さらには筆記体フォントまで、様々な無料のフォントが存在するため、サイトを作成する際にまず検討するべきでしょう。

適したフォントを利用することで、サイトはより際立ち、読みやすくなり、訪問者にメッセージが届きやすくなります。今回の記事が、フォントを賢く選ぶ参考になりましたら幸いです。