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

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

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

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

Webセーフなフォントとは?

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

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

2021年にWebセーフなフォントは必要なのか

2019〜2020年のブラウザマーケットシェア

2019〜2020年のブラウザマーケットシェア(画像引用元: StatCounter)

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

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

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

GoogleフォントはWebセーフなのか

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

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

These web-safe fonts are a) 100% free to use ✅ and b) don't need to be hosted anywhere else for your visitors to see them ✅ Find all 30+ options here ⬇️Click to Tweet

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

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

早速見てみましょう。

1. Arial

Arialの例

Arialの例

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

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

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

2. Baskerville

Baskervilleの例

Baskervilleの例

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

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

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

3. Bodoni MT / Bodoni 72

Bodoni MTの例

Bodoni MTの例

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の例

Calibriの例

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

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

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

5. Calisto MT

Calisto MTの例

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の例

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

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

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

7. Candara

Candaraの例

Candaraの例

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

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

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

8. Century Gothic

Century Gothicの例

Century Gothicの例

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

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

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

9. Consolas

consolas

Consolasの例

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

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

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

10. Copperplate Gothic

copperplate gothic

Copperplate Gothicの例

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

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

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

11. Courier New

Courier Newの例

Courier Newの例

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

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

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

12. Dejavu Sans

Dejavu Sansの例

Dejavu Sansの例

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

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

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

13. Didot

didot font

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の例

Franklin Gothicの例

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

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

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

15. Garamond

Garamondの例

Garamondの例

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

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

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

16. Georgia

Georgiaの例

Georgiaの例

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

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

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

17. Gill Sans

Gill Sansの例

Gill Sansの例

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

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

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

18. Goudy Old Style

Goudy Old Styleの例

Goudy Old Styleの例

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

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

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

19. Helvetica

Helvetica

Helveticaをタイトルに用いた、フォントについてのドキュメンタリー(引用元:Kanopy)

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

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

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

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

20. Impact

Impactの例

Impactの例

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

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

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

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

21. Lucida Bright

Lucida Brightの例

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 Sansの例

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

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

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

23. Microsoft Sans Serif

Microsoft Sans Serifの例

Microsoft Sans Serifの例

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

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

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

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

24. Optima

Optimaの例

Optimaの例

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

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

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

25. Palatino

Palatinoの例

Palatinoの例

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

ダウンタイムとWordPressの問題との戦い?Kinstaはパフォーマンスとセキュリティのために設計されたホスティングソリューションです!プラン一覧をご確認ください。

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

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

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

26. Perpetua

Perpetuaの例

Perpetuaの例

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

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

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

27. Rockwell

Rockwellの例

Rockwellの例

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

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

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

28. Segoe UI

Segoe UIの例

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の例

Tahomaの例

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

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

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

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

30. Trebuchet MS

Trebuchet MSの例

Trebuchet MSの例

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

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

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

31. Verdana

Verdanaの例

Verdanaの例

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

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

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

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

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

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

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

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

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

Webセーフなフォントはどこでダウンロードできる?

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

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

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

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

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

WordPressでCSSを追加する

WordPressでCSSを追加する

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

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

Chrome開発者ツールを用いた「検証」

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に記述し、「公開」をクリックすると、サイトに反映されます。

WPカスタマイザー(見出しのフォントを変える)

WPカスタマイザー(見出しのフォントを変える)

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

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

bodyのCSSセレクタ(font-family)

bodyのCSSセレクタ(font-family)

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

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

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

CSSスタイルシートの一例

CSSスタイルシートの一例

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

Did you know that switching to web-safe fonts can speed up your website? 🚀 And that 70% of consumers say page speed influences their purchasing decisions? 😱 Two great reasons to check out this list of 30+ web-safe fonts ⬇️Click to Tweet

まとめ

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

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

最適なフォントを利用することで、サイトはより際立ち、読みやすくなり、訪問者にメッセージが届きやすくなります。今回の記事が、フォントを賢く選ぶ上で、お役に立てれば幸いです!


この記事はお気に召しましたでしょうか。KinstaのマネージドWordPressホスティングサービスもご確認ください。ウェブサイトをスピードアップし、知識・経験豊富なWordPressに精通したエンジニアによるカスタマーサポートを24時間365日ご利用いただけます。Google Cloudを使用したインフラストラクチャは、オートスケーリング、パフォーマンス、およびセキュリティに特化。Kinstaの魅力はまだまだ他にもございます。当社のプランをご確認ください。