データ量が多く重い印象だったwebフォントですが、ネット環境が普及している現代では、昔と比べて気軽に使用できるようになりました。何と言っても、機種に縛られずに任意のフォントを使用できるのは本当に助かります。今回は、個人的によく使用している「おすすめのwebフォント」をご紹介したいと思います！

スタイリッシュで癖のない、汎用性の高いフォントです。
例えば車のサイトなどのスタイリッシュなサイトや、文章を読ませたい読み物系のサイト、癖がなく邪魔にならないため写真メインのサイトなどにも使いやすいです（ちなみに、このブログもNoto Sans JPを使用しています）。

設置例

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

body {
    font-family: 'Noto Sans JP', sans-serif;
}

フォント情報

上記「Noto Sans JP」の明朝体ver.です。
美容室や女性向けのサイトなど、おしゃれで大人な印象を与えたいときや、洗練された和の雰囲気を出したいときなどにおすすめです。さりげなくサイトを引き立ててくれるのも良いですね。美しさすら感じます。

設置例

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">

body {
    font-family: 'Noto Serif JP', serif;
}

フォント情報

Notoシリーズとは少し違って、少し柔らかい印象・丸っこいフォルムのフォントです。
人のぬくもりや温かさを感じるような、例えば病院のサイトなどに適していると思います。少し冷たくなりすぎてしまったり、逆に子供っぽくなりすぎてしまったときなどに使用すると、ちょうどよい温度感のあるサイトを演出することができます。

設置例

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">

body {
    font-family: 'M PLUS 1p', sans-serif;
}

フォント情報

M+フォントの角丸ver.です。
M+の良さはそのままに、柔らかい印象がさらにアップしました。人の心に寄り添うような、温かみのあるサイトや、可愛らしさもあるので子供向けのサイトなどにぴったりです。

設置例

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">

body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

フォント情報