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

更新:

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>
いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせす
このエントリーをはてなブックマークに追加