全部無料！CSSで指定できるおすすめフォントランキングBEST10

こんにちは！ ライターのナナミです。

CSSで指定できるフォント、いろんな種類があって迷っちゃいますよね。

なかなか使い勝手のいいフォントが見つからない…

なんてお悩みを持つ方も多いと思います。

今回はそんな数多くあるフォントの中から、オススメのフォントをランキングでご紹介します！
最近は日本語のWEBフォントもかなり種類が増えてきたので、盛りだくさんでお送りしちゃいます。

CSSでフォントを指定する方法

まずはCSSでフォントを指定する方法をおさらいしておきましょう。

下記のように記述することで、フォントを指定することができます。

セレクタ {
    font-family: フォントの種類;
}

WEBフォントの場合は、まずフォントのデータ自体を読み込む必要があります。
忘れないようにしてくださいね。

フォントを指定する方法は、下記の記事でもっと詳しく解説しています。
こちらも併せて確認してみると、より理解が深まりますよ！

>>サイトのフォントを自由に設定！font-familyの使い方

おすすめフォントランキングBEST10

さあ、今回のメインコンテンツ！
おすすめフォントランキングBEST10を発表していきましょう。

下記の3つの点に注目し、ランキング評価をしました。

デザインの美しさ
デザインの汎用性
文字の種類

今回チョイスしたフォントは、無料で使えるWEBフォントか、パソコンにデフォルトで入っているものばかりです。
気軽に使えるので、どんどん試してみてくださいね。

10位 Sacramento

https://fonts.google.com/specimen/Sacramento

デザインの美しさ：★★★★★
デザインの汎用性：★★☆☆☆
文字の種類：★☆☆☆☆

美しい筆記体のフォントです。
手書き風の柔らかさがとってもおしゃれですね。

特に女性向けのおしゃれなサイトに組み込むと、より雰囲気を作り出してくれるでしょう。

筆記体のフォントなので、当然のことながら日本語が使えないのがマイナス点です。
また、雰囲気によっては合わないサイトも多いので、汎用性が高くはないでしょう。

しっかり使い方を考えれば、素敵なサイトに仕上げてくれるフォントです。

実装用コード

@import url('https://fonts.googleapis.com/css?family=Sacramento');

セレクタ {
    font-family: 'Sacramento', cursive;
}

9位 Ubuntu Mono

https://fonts.google.com/specimen/Ubuntu+Mono

デザインの美しさ：★★★★☆
デザインの汎用性：★★★☆☆
文字の種類：★☆☆☆☆

ちょっと幾何学的な雰囲気を感じるフォントです。
おしゃれさの中にかっこよさや誠実さを感じる、ちょっと男性っぽいデザインに向いていそうですね。

コーポレートサイトのアクセントにすると、かなりおしゃれになってくれるでしょう。

ただ、こちらも日本語は使えません。
雰囲気的な汎用性はあるのですが、機能的にみると難しいところですね。

実装用コード

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');

セレクタ {
    font-family: 'Ubuntu Mono', monospace;
}

8位 さわらび明朝

https://fonts.google.com/specimen/Sawarabi+Mincho

デザインの美しさ：★★★☆☆
デザインの汎用性：★★☆☆☆
文字の種類：★★★☆☆

筆の終わりにちょっと墨が溜まったような、ぽてっとした丸みがあるのが特徴の明朝体です。
普通の明朝よりも柔らかく、だからと言ってふにゃふにゃしていないまっすぐさがあります。

さらに、日本語も英語も対応しているので、汎用性もバッチリ。
本文中にも見出しにも使える、とても素敵なフォントです。

ただ、対応していない漢字が少しあったりします。
基本的なテキストでは問題ありませんが、ちょっと特殊な文字を使う場合は注意が必要です。

@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');

セレクタ {
    font-family: 'Sawarabi Mincho', sans-serif;
}

7位 Rounded M+ 1c

https://fonts.google.com/specimen/M+PLUS+Rounded+1c

デザインの美しさ：★★★★☆
デザインの汎用性：★★☆☆☆
文字の種類：★★★☆☆

文字のアウトラインもまるっと可愛らしい、丸ゴシック体です。
丸ゴシック体はWindowsとMacでだいぶ見栄えが変わってしまうのですが、このフォントを使えば見栄えを揃えられるのが最高ですね。

ポップなサイトを作る際は、このフォントを太めに設定するとかなり雰囲気に合うと思います。

ただ、こちらも未対応の漢字があるので、注意が必要です。
これからだんだん対応してくれることを期待しましょう！

実装用コード

@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');

セレクタ {
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

6位 M+ 1p

https://fonts.google.com/specimen/M+PLUS+1p

デザインの美しさ：★★★★☆
デザインの汎用性：★★★★☆
文字の種類：★★★☆☆

先ほど紹介したRounded M+ 1cのゴシック体バージョンです。
ゴシック体ならではの使いやすいスッキリした印象の中に、ちょっと変わった雰囲気が出るような独特のデザインがうまく織り込まれています。

ゴシック体な分、Rounded M+ 1cより使いやすいと評価しました。

こちらも未対応漢字には注意して使ってくださいね。

実装用コード

@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');

セレクタ {
    font-family: 'M PLUS 1p', sans-serif;
}

5位 さわらびゴシック

https://fonts.google.com/specimen/Sawarabi+Gothic

デザインの美しさ：★★★★☆
デザインの汎用性：★★★★☆
文字の種類：★★★☆☆

先ほど紹介したさわらび明朝のゴシック体バージョンです。
こちらも筆先に遊び心があり、独特の雰囲気を持っています。

M+ 1pとはまた違った面白さがあるので、見ていて飽きない、本文向きのフォントです。

ただ、やはり未対応漢字には注意する必要があります。

実装用コード

@import url('https://fonts.googleapis.com/css?family=Sawarabi+Gothic');

セレクタ {
    font-family: 'Sawarabi Gothic', sans-serif;
}

4位 小杉ゴシック

https://fonts.google.com/specimen/Kosugi

デザインの美しさ：★★★★☆
デザインの汎用性：★★★★☆
文字の種類：★★★☆☆

最近Google Fontsに追加された、比較的新しいフォントです。
どっしりしっかり、骨太な印象があります。

見出しとかに使うと、雰囲気になじみつつもしっかり存在感を出してくれます。

しかも対応漢字の幅がかなり広いので、心配せずに使うことができるのがポイント高いです。

ただしその分、太さの種類が1種類しかありません。
そこがクリアされたら、本文などにも活躍の場が広がりそうですね。

実装用コード

@import url('https://fonts.googleapis.com/css?family=Kosugi');

セレクタ {
    font-family: 'Kosugi', sans-serif;
}

3位 游ゴシック

http://www.jiyu-kobo.co.jp/library/ygf/

デザインの美しさ：★★★★★
デザインの汎用性：★★★★☆
文字の種類：★★★★★

ここまではGoogle Fontsの中から紹介してきましたが、こちらはOSにデフォルトで入っているフォントです。
線が細く、おしゃれで美しいゴシック体になっています。

デフォルトフォントなので、フォントの読み込み不要で使うことができます。
読み込みって地味に面倒なので、ありがたいですね。

ただ、デザインが独特なので本文などにはあまり向いていないフォントです。
見出しなどでうまく使って、サイトの雰囲気を出せるとよいでしょう。

実装用コード

セレクタ {
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
}

2位 Noto Serif Japanese

https://fonts.google.com/specimen/Noto+Serif+JP

デザインの美しさ：★★★★★
デザインの汎用性：★★★★☆
文字の種類：★★★★★

こちらも最近Google Fontsに追加された、明朝体のフォントです。
スタンダードな明朝体ですが、アウトラインが滑らかで美しいですね。

しかも、漢字のフォローもバッチリ！
何の心配もなく使える明朝のフォントは今までなかったので、これから大活躍間違いなしです。

明朝体は使い方によっては固くなりすぎちゃうという点で、泣く泣く減点しました。
明朝体が合うサイトには最高のフォントだと思うので、騙されたと思って使ってみてください。

実装用コード

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP');

セレクタ {
    font-family: 'Noto Serif JP', sans-serif;
}

1位 Noto Sans Japaneze