日本語のフリーフォントのWEBフォントを探している人がたどり着くフォント『M+ FONTS』。

激太文字から細文字までたくさんの種類があり、デザインとしても綺麗で見出しなどにも使用しやすいフォントです。

ライセンスがフリーでWEBフォントとしても無料で使用可能です。

日本語フォントを公開されている『M+ FONTS』のダウンロードはこちら

M+FONTSをWEBフォントとして利用する方法

１．まずWEBフォントして使用したいフォントの種類を選ぶ

下記のサイトの『フォントを選択』で、フォントのイメージが分かります。
http://mplus.font-face.jp/

２．次に、WEBフォントに対応する文字をどこまでか決める。

(Aパターン)…対象の文字だけWEBフォントにする。
（使用時例：漢字をしない場合。HTMLの修正が少ないと見込めるとき。表示速度を早く、フォントファイルのサイズを抑えたいとき）
(Bパターン)…M+フォントで表示できるすべての文字をWEBフォント化する。
（使用時例：漢字によるHTMLの修正が多いと見込めるとき。新規ページ・追加などに対応できるようにしたい時）

Bパターンの場合は後日記事を作成いたします。

Aパターンの時の手段の概要として、
文字をサブセット化して動的でないフォントデータを生成し、
そのデータを読み込みフォントの高速表示を行います。
指定の文字だけ軽量化して対応させるため、表示速度を気にせずに利用できます。

３．『WEBフォントに対応する文字』のデータを取得する。

下記のサイトを開き、まず使用したいフォントを選択し、
データを入力し、下の文字の種類をすべてチェックする。

４．『変換・ダウンロード』ボタンをクリック。

５．ダウンロードしたデータをすべてサーバーにアップロードする。

（fontsフォルダを作成して管理しましょう）

６．『使い方』の欄にCSSの記述があるので、コピーし対応するHTMLのCSSに貼り付ける。

（必ず『url:../fonts/』フォルダ構造は実際の配置場所に書き換える！）

７．HTML、CSSをサーバーにアップロードする。

８．HTMLを確認する。

以上の手順でできました。

▼実際の使用例(使用フォント：M+ 2c black)
綺麗で優良な素晴らしいFONTファイル、MPLUSFONTS！
※サブセットした文字：『綺』、『麗』＋チェック（ひらがな、カタカナ、英語、記号）

（『優』『良』『素』『晴』はサブセットしていないので、標準フォントで表示されます。）

いかがでしょうか？

上の文字を選択して、コピー＆ペーストすることもできます！

本来画像で作成するような文字デザインをテキスト化することで、SEO対策にも有利になります。

後日、Bパターンの設定方法を更新いたします。