1. TOP
  2. 魅力的すぎる!おすすめWebフォント(日本語も使える)まとめ5選

魅力的すぎる!おすすめWebフォント(日本語も使える)まとめ5選

ウェブ業界に携わる人はもちろん、そうでない人であっても「Webフォント」という言葉を聞いたことがある人は多いのではないでしょうか。

Webフォントとは、CSS3になって新しく追加された機能のことです。Webフォントは、インターネット回線を利用し、フォント情報が設置してあるサーバに接続して、フォントファイルを取得します。

従来のインストール型のフォントとは異なり、ユーザーの環境に左右されずに意図したデザインが実現できることになります。Webフォントは難しいと思われているのですが、導入はとても簡単です。CSSの基本が理解できていれば使うことができます。

Webページを構成するCSSファイルに、指定したいWebフォントの設置場所を指定するだけです。あとは、任意のスタイルにWebフォントを指定することができます。

今回の記事では、Webフォントの基本をわかりやすく解説し、日本語も使えるおすすめのWebフォントを5つまとめました。

Webフォントのメリット・デメリット

まず、Webフォントについて簡単に解説しておきましょう。

とても便利なWebフォントなのですが、
その特徴を理解した上で使っていきたいもの。

ここでは、Webフォントを使う際の
メリット・デメリットについてご説明しておきましょう。

Webフォントのメリット

Webフォントの最大のメリットは、
インストールの必要がないことでしょう。

従来は、指定したフォントがインストールされていない場合、
意図しないフォントで表示されてしまうことがありました。

そうなってしまうと、せっかくのデザインも崩れてしまいますよね。
これを防ぐためによく行われているのが、画像にテキストを埋め込んでいるケース。

しかし画像が増えるとページが重くなりますし、SEO面でも不利になるのです。
Webフォントを使うと、そういった問題が一気に解消します。

Webフォントのデメリット

さて、Webフォントのデメリットについても確認しておきましょう。

Webフォントは、インターネット回線を必要とし、
読み込みにある程度の時間を要することが、デメリットの一つです。
Webフォントの宿命のようなものですね。

ただし、Webフォントの速度も改善してきているので、
使い方によってはあまり大きなマイナス要因にはならないでしょう。

日本語も使えるWebフォントまとめ

それでは、日本語も使えるWebフォントについてみていきましょう。
魅力的なフォントも多いので、ぜひ参考にしてみてくださいね。

Google Noto Sans Japanese

3−1

webfont

検索エンジン最大手Googleが提供している無料の日本語Webフォント。

とても読みやすく、きれいなフォントですね。
ライセンスは、Apache License, Version 2.0。

https://www.google.com/get/noto/#/family/noto-sans-java

TypeSquare

web3

モリサワと同様の企業が提供している、TypeSquare。
有料のWebフォントなのですが、大手ということで安心感もあります。

ビジネスよりのフォントから遊び心のあるフォントまで、ラインナップは多数。

http://typesquare.com/

FONTPLUS

3−3

DNPやモリサワ、イワタ、モトヤなどの
大手フォントメーカーによるWebフォント。

700以上の書体があります。
利用料金は、ページビューによって変動する形式です。

http://webfont.fontplus.jp/

アマナイメージズ Webフォント

3−4

写真素材で有名な、アマナイメージズによるWebフォント。

有料ではありますが、低価格です。
トライアル版も用意されています。

http://amanaimages.com/font/web/index.aspx

M+ OUTLINE FONTS

3-5

無料のWebフォント、M+ OUTLINE FONTS。

シンプルですがデザインも良く、使いやすいフォントです。
フラットデザインに合う、という意見が多く聞かれます。

http://mplus-fonts.osdn.jp/webfonts/

まとめ

いかがでしたでしょうか。ご紹介したように、Webフォントには短所もあります。
デザイン性が高くなったとしても、使い勝手が悪くなってしまっては本末転倒です。

ユーザビリティにはしっかりと配慮して、ユーザー目線を忘れずに。
最適な箇所に、上手に活用していくようにしましょう。

\ SNSでシェアしよう! /

注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!