無料の日本語webフォント、M+ WEB FONTSを使ってみました

webフォントとしても使える日本語フリーフォント M+WEBFONTS

無料で商用としても使える無料のwebフォントを探していたところ、ベーシックで使いやすそうなフォントがありました。

webフォントの使い方

使いたいウェイトのみを定義して使う場合

使いたいウェイトを、@font-faceで定義した後、使用したい場所に font-family でそのフォントを指定するだけで使えます。

/* フォントの定義 */
@font-face {
  font-family: mplus-1p-regular;
  src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf')
     format("truetype");
}

/* 使いたいところでフォントファミリーを指定 */
h1 {
  font-family: mplus-1p-regular;
}

すべてのM+フォントを定義されたCSSを使う場合

すべてのM+フォントを定義された mplus_webfonts.css というCSSが用意されています。これをHTMLのhead内で読み込んで、あとは使いたい場所に font-family で指定します。

<head>
  <title>TITLE</title>
  <link rel="stylesheet"
 type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css" />
</head>

ライセンスについて

ライセンスは下記のようにフリーで商用可とのこと。
（2014年12月14日現在）

これらのフォントはフリー（自由な）ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

念のため、利用前には配布サイト（M+WEBFONTS）にてご確認ください。

fromdot