MEMORVA
ウェブサイト制作 HTML/JavaScript モバイル Linux 開発 サイト運営

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

更新:

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

Google フォント

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


使い方は簡単で、上記サイトに書いてある通り、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>
いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせす

はてなブックマーク X Bluesky