どうやら、最近は日本語が使える無料Web Fontsがあるようなので、早速使ってみる。
好みの問題かもしれないけど、細いフォントってかっこいい。
日本語でも、タイポグラフィとか意識できる時代になるのかしら。
ただ、使ってみると、ちょっと遅いかな。
比較
Google Noto Sans Font Japanese(日本語版)
IPAフォント
M+ Fonts
IPAフォントをベースにつくられたフォント
NGT Font
IPAフォントをベースにつくられたフォント
bokutachi
サンプルコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Font</title>
<style>
/*Google Noto Sans Web Fonts*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
#noto {
font-family: 'Noto Sans Japanese', serif;
font-weight: lighter;
}
/*IPAフォント*/
@font-face {
font-family: ipaexg;
src: url('IPAexfont00301/ipaexg.ttf');
}
#ipaexg {
font-family: ipaexg;
font-weight: lighter;
}
/*mplus font*/
@font-face {
font-family: mplus-1p-light;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-light.ttf');
format("truetype");
}
#mplus {
font-family: mplus-1p-light;
font-weight: lighter;
}
/*NGT Font*/
@font-face {
font-family: ngt;
src: url('ngtmp/ngtmp.ttf');
}
#ngt {
font-family: ngt;
font-weight: lighter;
}
/*bokutachi*/
@font-face {
font-family: bokutachi;
src: url('boku/bokutachi.otf');
}
#bokutachi {
font-family: bokutachi;
font-weight: lighter;
}
</style>
</head>
<body>
<h1>Google Noto Sans Web Fontsを使ってみない。</h1>
<h1 id="noto">Google Noto Sans Web Fontsを使ってみる。</h1>
<hr>
<h1>IPAフォントを使ってみない。</h1>
<h1 id="ipaexg">IPAフォントを使ってみる。</h1>
<hr>
<h1>M+ Fontを使ってみない。</h1>
<h1 id="mplus">M+ Fontを使ってみる。</h1>
<hr>
<h1>NGT Fontを使ってみない。</h1>
<h1 id="ngt">NGT Fontを使ってみる。</h1>
<hr>
<h1>ぼくたちフォント（bokutachi）を使ってみない。</h1>
<h1 id="bokutachi">ぼくたちフォント（bokutachi）を使ってみる。</h1>
</body>
</html>