Google Fonts + 日本語 早期アクセス というサイトが出来ていますね！
Google Fonts の日本語（試験的）のようです。
まだ試験中なので、本番の Google Fontsサイト には無い日本語のフォントが提供されていますね。
評判が良ければ本番サイトに反映されるのかもしれません。
さっそく使ってみましょう！
基本的にはGoogle Fontsと同じように簡単に使えるようですね。
Google Fonts 日本語の使い方
- フォントを定義しているCSSを参照する
- 参照したフォントを「font-family」としてCSSに追記する
たったこれだけでOKです。
1. フォントを定義しているCSSを参照する
まずはHTML側でCSSを参照します。
今回は「はんなり明朝」「ニコモジ」「ニクキュウ」という日本語フォントを使ってみましょう。
|
1 2 3 |
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" /> |
2. 参照したフォントを「font-family」としてCSSに追記する
後はCSSのクラスに「font-family」として使いたいフォントを指定するだけでOKです。
簡単ですね！
|
1 2 3 4 5 6 7 8 9 |
p.hannari { font-family: "Hannari"; } p.nikomoji { font-family: "Nico Moji"; } p.nikukyu { font-family: "Nikukyu"; } |
これだけで Google Fonts の日本語が使えます。
サンプルを作成したので良ければ覗いてみてください。
試験中のようですので、まだ仕事では使わない方が良いかもしれませんね。
