ウェブのあれこれ
ウェブを活用したいひとのためのブログ
Google 日本語Webフォントの使い方
2016/02/28 HTML/CSS

Google 日本語Webフォントの使い方

Webフォント使ってますか?最近は日本語のWebフォントを提供するサービスも増えてきましたね。

日本語Webフォント

通常、フォントを指定しない状態だと、WindowsとMacでフォントが違って雰囲気が全然違うときがありますよね?
Webフォントを活用することで、各種OSやブラウザで同じフォントを表示することができます。

Noto Sans Japanese

Googleで「Noto Sans Japanese」という日本語対応Webフォントが公開されています。
ヒラギノ角ゴをベースにしたようなフォントで、もちろんWindows、Macでも表示されますし、スマートフォンでも表示できます。
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" />
利用する際のCSSは上記のGoogleが提供しているCSSをまず読み込みます。そして、フォントを適用したい箇所にfont-familyを指定するだけです。指定するfont-familyは「Noto Sans Japanese」です。
ページ全体をWebフォントにしたい場合はbodyタグに以下のような指定をしましょう。
body
{
font-family:'Noto Sans Japanese';
}
フォントが適用できない場合はデフォルトのフォントになります。
環境などによって優先順位をつける場合は、カンマ区切りで複数のフォント名を指定することもできます。

7種類のfont-weight

font-weightは100~500までの100刻みと700,900とあり、7種類のfont-weightが利用できます。
normalを指定すると400、boldを指定すると700のフォントが表示されます。

残念ながら明朝体はまだない?

残念ながら、Googleの提供する無料のWebフォントでは明朝体はまだ無いようです。
明朝体を利用したい場合はフォントを購入するか、無料のフォントをWEBフォントに加工するしかないようですね。
Provided by Revolme inc.
revolme.co.jp