Google日本語WEBフォント

2017年2月1日その他

Googleで公開している。9種類の日本語WEBフォントを利用してみました。今の段階では試験的に提供しているようです。試しに、利用してみました。とりあえず、9種類全部のファイルを読み込んでいるので、このページだけ少々重くなっています。WEBフォントというと、過去にも利用したときに、とても読み込みに思いイメージがあり、あまり使うきになれませんでした。ただ、他の方のいくつかの記事で、読み込みスピードをもさぼと気にならないようなことを拝見しましたので、試してみました。やはり、文字によるインパクトは大きなものなので、文字がかわるだけで、サイトの見栄えがよくなったりと、かなりの視覚的効果が期待できるので、重くないのなら使用していこうと思いました。Googleでの貼り付けコードでは、CSSに直接リンクされていて、のぞいてみると、さらにいろいろ読み込まれています。自分が使う以外に不要だと思えるものは削って、使う部分だけコピーして、自分のCSSに貼り付けて利用すれば、多少は早くなると思います。

https://googlefonts.github.io/japanese/

M + 1p

1
.wf-mplus1p{ font-family: "Mplus 1p"; font-weight: 900; font-size: 30px;}

日本語フォント
あいうえお
ABCDEFG


Rounded M +1C

1
.wf-roundedmplus1c { font-family: "Rounded Mplus 1c"; font-weight: 900; font-size: 30px;}

日本語フォント
あいうえお
ABCDEFG


はんなり明朝

1
.wf-hannari { font-family: "Hannari"; font-weight: 900; font-size: 30px;}

日本語フォント
あいうえお
ABCDEFG


こころ明朝

1
1
.wf-kokoro { font-family: "Kokoro"; font-weight: 900; font-size: 30px;}

日本語フォント
あいうえお
ABCDEFG


さわらび明朝

1
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; font-weight: 900; font-size: 30px;}

日本語フォント
あいうえお
ABCDEFG


さわらびゴジック

1
..wf-sawarabigothic { font-family: "Sawarabi Gothic"; font-weight: 900; font-size: 30px;}

日本語フォント
あいうえお
ABCDEFG


ニコモジ

1
.wf-nicomoji { font-family: "Nico Moji"; font-weight: 900; font-size: 30px;}

日本語フォント
あいうえお
ABCDEFG


ニクキュウ

1
.wf-nikukyu { font-family: "Nikukyu"; font-weight: 900; font-size: 30px;}

日本語フォント
あいうえお
ABCDEFG


Note Sans Japanese

1
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; font-weight: 900; font-size: 30px;}

日本語フォント
あいうえお
ABCDEFG