フリーで使える日本語のwebフォントを使おう!!
最近、webフォントがどんどんいろんなサイトで使用されており、日本語のフォントも見かけることも多くなってきました。
webフォントを提供しているサービスは数多くあるのですが、少々お値段がかかってしまうので、
今回、フリーで使用できる日本語のwebフォントを2つ紹介したいと思います。
いきなり話はそれますが、先日さくらさんがwebフォントに関する新たなサービスを発表していました。
モリサワとさくらインターネットが協業し、無料でのWebフォント導入を実現
これは制作物の幅が広がりそうですね!!
フリーの日本語webフォントを使う
さて、本題に入りますが、私が把握している日本語のwebフォントでフリーで使えるのは2つになります。
・M+ FONTS
・Noto Sans JP
M+ FONTS
まずはM+ FONTSというフォントです。
webフォントの使用は下記のサイトにもありますが、
M+ Web Fonts
使用したいフォントをダウンロードして以下のようにして使用します。
1 2 3 4 5 6 7 | @font-face{ font-family: 'mplus-1p-light'; src: url('../font/mplus-1p-light.eot'); src: url('../font/mplus-1p-light.eot?#iefix') format('embedded-opentype'), url('../font/mplus-1p-light.woff') format('woff'), url('../font/mplus-1p-light.ttf') format('truetype'); } |
そして、使用したいタグに、
1 2 3 | p { font-family: 'mplus-1p-light'; } |
と指定してやるとフォントを使えます。
Noto Sans JP
次は、Noto Sans JPになります。
このフォントはgoogleが提供しているフォントでいろんな言語が用意されています。
日本語を使いたい場合はこちら、
Google Fonts : Early Access
サイトにも記載がありますが、
1 | @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); |
このCSSを読み込みあとは、先ほど同じように、
1 2 3 | p { font-family: 'Noto Sans JP'; } |
と指定すると使用できます。
ちなみにこのフォント、Noto Sans Japaneseというものも存在しています。
ほぼ同じものなんですが、ウェイトの種類や、対応文字数がほんの少し違うだけです。
詳しくは以下のサイトで詳しく説明されております。
Google Fontsの日本語フォント「Noto Fonts」の使い方 | OXY NOTES
webフォントによって表現がより豊かにできるのでぜひぜひ使用していきたいですね!
今後の問題としては、やはりwebフォントは重いので、表示スピードが遅くなってしまうことだと思います。
キャッシュを使ったりいくつか方法がありますが、
必要な文字だけダウンロードしてくる、みたいになれば無駄がなくて便利ですよね。。。
Author Profile
スターフィールド編集部
SHARE