ユーザーにとって価値ある情報を繰り返し発信していく「まるログ」

無料日本語WEBフォント。その設定方法とライセンスに注意！

無料日本語WEBフォント

ブラウザWEBフォントを使用すると、ブラウザに左右されず、デザイナーの意図したフォントがWEB上で表示されます。企業やブランドのイメージを伝えるために、ブラウザに左右されないフォントが使えると便利ですよね。最近では日本語でも無料のWEBフォントが普及しており、気軽にWEBフォントをサイトに取り入れることができます。この記事では、無料WEBフォントを中心に紹介していきます。

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

まずはWEBフォントのメリット・デメリットをみていきましょう。

メリット

・ブラウザに左右されずに、フォントの指定ができる。
・レスポンシブサイトの場合、画像を使用しなくてもいいため、対応しやすい。
・更新作業が楽。
・コピペができる。
・SEO対策にもなる。（タイトルなどに、画像を使用しないため）

タイムラグデメリット

・読み込む時間がかかる。
・タイムラグがでてしまう場合がある。（標準フォント表示後、WEBフォント表示）
・無料WEBフォントの場合、ライセンスを確認しなければならない。

WEBフォントのメリットは魅力的ですが、やはり表示に少し時間が掛かることが最大のデメリットです。使用するときは、本当に必要かどうかや使用する箇所を見極める必要があります。

無料WEBフォントの使用時はライセンスに注意

ライセンスWEBフォントのデメリットにも挙げたように、無料フォントを使用する際は「ライセンス」に注意しなければなりません。
多くの無料WEBフォントの場合、「WEBフォントを使用する＝フォントのデータをWEB上で再配布する」ということにもなりますので、使用するフォントが再配布可能なものかを確認した上で、使用してください。また、ダウンロードしたWEBフォントは、ファイル形式の変換が必要な場合もありますし、サブセット化（使用する文字だけを抜き出す作業）をする場合もあります。このあたりのライセンスも確認しておきましょう。

WEBフォントの使用方法

前述したとおり、WEBフォントを使用する際には、ブラウザやデバイスに対応できるように、形式を変換する必要がでてくることもあります。
woff(Web Open Font Format)形式とttf形式またはotf形式があれば、主要ブラウザ・スマホはカバーできます。持っているデータが足りない場合は、無料コンバータ等もWEB上で見つけることができるので、変換して使用してください。
あとはcssの@font-faceにフォント名の指定とソースを記述し、使用したい箇所にfont-familyの指定をすれば完了です。

@font-face {
   font-family: フォント名;
   src: url(フォントのソース);
   }
h1{font-family: ‘フォント名’;}

Googleフォントの使用方法は更に簡単！そのうえ読み込みも高速！

例えばGoogleフォントのNoto Sans CJK JPなら、こちらの記述でOKです。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
 
body {
    font-family: 'Noto Sans JP', sans-serif;
}

さらに太さを指定したい場合は下記のように指定できます。

h1{font-weight:900;}
h2{font-weight:800;}
p{font-weight:400;}

Googleでは上記のNoto Sansをはじめとした９種類の日本語WEBフォントを「Google Fonts + 日本語早期アクセス」で試験的に無料提供しています。９種類のWEBフォントの中には、ベーシックなゴシック体や明朝体、丸ゴシック体の他、丸みのあるポップなフォントや「はんなり明朝」等も含まれています。

Google Fonts + 日本語早期アクセスで扱っているフォント
・M+ 1p：飽きのこないベーシックなゴシックフォント。太さを７段階で変更できます。
・Rounded M+ 1c：ベーシックな丸ゴシックフォント。太さを７段階で変更できます。
・はんなり明朝：墨溜まり意識した個性的な明朝体。
・こころ明朝：少しほっそりとした、角丸な明朝体。
・さわらび明朝：本文用のフォントとして使いやすいベーシックな明朝体。
・さわらびゴシック：本文用のフォントとして使いやすいベーシックなゴシック体。
・ニクキュウ：モリっとして、ツヤのあるカタカナフォント。
・ニコモジ：丸みとボリューム感がある、ひらがなカタカナフォント。
・Noto Sans Japanese：ベーシックなゴシックフォント。太さを７段階で変更できます。
フォントのデザインや実装方法は「Google Fonts + 日本語早期アクセス」を確認してください。

通常、日本語のWEBフォントは１つのウェイトで1MB以上あります。これを複数のウェイトを読み込もうとすれば、とても実用的ではありません。しかしGoogleフォントなら、Googleの高速サーバに設置されているフォントを使用します。さらにWEBフォントは同じサーバにあるものを一度ダウンロードすれば、次回からはキャッシュを利用して短時間でフォントを表示することができます。つまりGoogle WEBフォントが世の中に普及すればするほど、その恩恵を受けることができるわけです。

オススメのフォントコンバータ（無料）

FONT SQUIRREL – Webfont Generator >
WEBで公開されている無料コンバータです。手持ちのフォントをアップロードして、「Agreement」にチェックを入れてダウンロードボタンを押すだけです。日本語フォントの場合は「EXPERT」を選択して、「Subsetting」で「No Subsetting」を選択してください。とても便利で使いやすいツールです。
こちらのページで使い方を分かりやすく解説しています。
サブセットWebフォントを作成する(Font Squirrel Webfont Generator) >

WOFFコンバータ >
ソフトをダウンロード＆インストールして使用するタイプのコンバータです。TrueTypeフォント、OpenTypeフォントからWebフォントであるWOFF、WOFF2を作成できます。

サブセットフォントメーカー >
ソフトをダウンロード＆インストールして使用するタイプのサブセット化専用のソフトです。フォントから指定された文字列だけを取り出して、ファイルサイズを小さくできます。

WEBフォントを使用する際は、サブセット化して不要な文字を取り除き、フォントデータを軽くすることをオススメします。WEBフォントで使用する文字が確定している場合は、必要な文字だけを指定してサブセット化を行います。
WEB公開後に、文章を追加したり動的に文字を書き出すような場合は【第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな】を指定しておくのが良いでしょう。この指定を行うことで普段滅多に使用しないような旧漢字等が削除され、大幅にフォントファイルの容量を減らすことができます。
第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな >

※WEBフォント用にコンバートして使用する場合は、くれぐれもフォント自体のライセンスにご注意ください。

オススメ無料日本語WEBフォント

無料で使用できる、クオリティの高い日本語WEBフォントをご紹介します。

ゴシック系

font_Noto_SansNoto Sans CJK JP
Googleの提供しているWEBフォント。太さも豊富で、初心者におすすめ！
https://www.google.com/get/noto/#sans-jpan

font_M_PlusM+FONTS
こちらも太さが豊富です。柔らかな雰囲気のフォントです。
http://mplus-fonts.osdn.jp/index.html

明朝系

花園明朝花園明朝
ベーシックで扱いやすい、美しい明朝体フォントです。
http://fonts.jp/hanazono/

はんなり明朝はんなり明朝
オープンソースIPAフォント使用。その名の通り、はんなりとした上品なフォント。
http://typingart.net/?p=44

ほのか明朝ほのか明朝
オープンソースIPAフォント使用。ひかえめな印象のフォントです。
http://font.gloomy.jp/honoka-mincho-dl.html

個性派フォント

ラノベポップラノベポップ
軽やかで弾むような、楽しい雰囲気のキュートなPOP体フォントです。
http://www.fontna.com/blog/1706/

にくまるフォントにくまるフォント
ゆるくて、柔らかい雰囲気が特徴のフォントです。
http://www.fontna.com/blog/1651/

ふぉんとうは怖い明朝体ふぉんとうは怖い明朝体
ゆらゆらと揺れるような、少し崩れた印象のフォントです。
http://www.fontna.com/blog/1371/

ロゴたいぷゴシック コンデンスドロゴたいぷゴシック コンデンスド
ロゴデザインやタイトルロゴ、見出し向けのフォントです。少し縦長ですっきりとした印象です。
http://www.fontna.com/blog/1345/

ロゴたいぷゴシックロゴたいぷゴシック
ロゴデザインやタイトルロゴ、見出し向けのフォントです。
http://www.fontna.com/blog/1226/

やさしさアンチックやさしさアンチック
普通のアンチック体よりも太さの差が少なく、漢字との統一感が高いデザインの漫画用フォントです。
http://www.fontna.com/blog/1122/

やさしさゴシックボールドやさしさゴシックボールド
オープンソースIPAフォント使用。手描きの味わいとゴシック体が融合した優しさのあるフォントです。少し太さのある見出し向けのフォントです。
http://www.fontna.com/blog/736/

やさしさゴシックやさしさゴシック
オープンソースIPAフォント使用。手描きの味わいとゴシック体が融合した優しさのあるフォントです。
http://www.fontna.com/blog/379/

※IPAフォントをベースに制作しているフォントは、使用する際は、IPAのページのライセンスを確認してください。http://ipafont.ipa.go.jp/ipa_font_license_v1.html
CSS内に下記のような記述をし、配布元を明確にしておきましょう。

/*
* “はんなり明朝” licensed under the IPA Font License Agreement v1.0
* http://typingart.net/（”はんなり明朝”配布元のURL）
* http://ipafont.ipa.go.jp/（IPAフォントのURL）
* http://ipafont.ipa.go.jp/ipa_font_license_v1.html（IPAフォントライセンスv1.0のURL）
*/

まとめ

WEBフォント以上、WEBフォントについて紹介してきましたが、いかがでしたか？
主に無料日本語WEBフォントについての話でしたが、もちろん、WEBフォントには有料のものもあります。有料のものだと、そのページに必要な文字だけを抜き出して表示することができるものもあるので、無料のWEBフォントよりも表示速度が上がります。まずは無料のWEBフォントを使ってみて、気に入ったら、有料のものを使用してみるのもいいかもしれませんね。

WEBデザイナー ／ F.M

WEBサイト制作に関するお問合せはこちら
WEBサイト制作に関するお問合せはこちら