Google日本語WEBフォント
2017年2月1日その他
Googleで公開している。９種類の日本語WEBフォントを利用してみました。今の段階では試験的に提供しているようです。試しに、利用してみました。とりあえず、９種類全部のファイルを読み込んでいるので、このページだけ少々重くなっています。WEBフォントというと、過去にも利用したときに、とても読み込みに思いイメージがあり、あまり使うきになれませんでした。ただ、他の方のいくつかの記事で、読み込みスピードをもさぼと気にならないようなことを拝見しましたので、試してみました。やはり、文字によるインパクトは大きなものなので、文字がかわるだけで、サイトの見栄えがよくなったりと、かなりの視覚的効果が期待できるので、重くないのなら使用していこうと思いました。Googleでの貼り付けコードでは、CSSに直接リンクされていて、のぞいてみると、さらにいろいろ読み込まれています。自分が使う以外に不要だと思えるものは削って、使う部分だけコピーして、自分のCSSに貼り付けて利用すれば、多少は早くなると思います。
https://googlefonts.github.io/japanese/
M + 1p
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
.wf-mplus1p{ font-family: "Mplus 1p"; font-weight: 900; font-size: 30px;}
日本語フォント
あいうえお
ABCDEFG
Rounded M +1C
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
.wf-roundedmplus1c { font-family: "Rounded Mplus 1c"; font-weight: 900; font-size: 30px;}
日本語フォント
あいうえお
ABCDEFG
はんなり明朝
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />
.wf-hannari { font-family: "Hannari"; font-weight: 900; font-size: 30px;}
日本語フォント
あいうえお
ABCDEFG
こころ明朝
<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />
.wf-kokoro { font-family: "Kokoro"; font-weight: 900; font-size: 30px;}
日本語フォント
あいうえお
ABCDEFG
さわらび明朝
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; font-weight: 900; font-size: 30px;}
日本語フォント
あいうえお
ABCDEFG
さわらびゴジック
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
..wf-sawarabigothic { font-family: "Sawarabi Gothic"; font-weight: 900; font-size: 30px;}
日本語フォント
あいうえお
ABCDEFG
ニコモジ
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
.wf-nicomoji { font-family: "Nico Moji"; font-weight: 900; font-size: 30px;}
日本語フォント
あいうえお
ABCDEFG
ニクキュウ
<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />
.wf-nikukyu { font-family: "Nikukyu"; font-weight: 900; font-size: 30px;}
日本語フォント
あいうえお
ABCDEFG
Note Sans Japanese
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; font-weight: 900; font-size: 30px;}
日本語フォント
あいうえお
ABCDEFG