Google Fonts Early Access にある日本語（和文）Webフォントをサイトで使う

更新：2016-11-24

Google Fonts Early Access で提供されている日本語（和文）Webフォントをサイトで使ってみる。

Google フォント

Googleにより日本語のWebフォントが試験的に提供されているので試した。
通常のGoogleフォントトップページではなくGitHub https://googlefonts.github.io/japanese/ にある。
2016年11月現在、フォントは9種類あり、漢字が使えるのは5種類。

M+ 1p（漢字あり）
Rounded M+ 1c（漢字あり）
はんなり明朝
こころ明朝
さわらび明朝（漢字あり）
さわらびゴシック（漢字あり）
ニクキュウ
ニコモジ
Noto Sans Japanese（漢字あり）

使い方は簡単で、上記サイトに書いてある通り、HTML、CSSを少し記述するだけで良い。
例えば、はんなり明朝を使ってみる。

HTML <head>要素内

<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />

CSS は font-family を指定するだけでも良いが、なんとなく縦書きにしてみた。

<style>
.ftest {
	font-family: "Hannari";
	font-size: 3em;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
}
</style>

<span class="ftest">
いろはにほへと　ちりぬるを<br />
わかよたれそ　つねならむ<br />
うゐのおくやま　けふこえて<br />
あさきゆめみし　ゑひもせす
</span>

いろはにほへと　ちりぬるを
わかよたれそ　つねならむ
うゐのおくやま　けふこえて
あさきゆめみし　ゑひもせす

カテゴリ