日本語Webフォント「Noto Sans JP」の導入手順

日本語Webフォント「Noto Sans JP」の導入手順

日本語Webフォント「Noto Sans JP」の導入手順

日本語Webフォントの「Noto Sans JP」をサイトで使うための手順をご紹介いたします。

簡単に綺麗なWebフォントが導入できますので、Webフォントの導入を検討されている方は、ぜひお試しください。

Noto Sans JPの導入手順

Noto Sans JPの導入手順は、至って簡単です。CSSで以下のように指定すれば、Noto Sans JPが使えるようになります。


@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
 
body {
 font-family: 'Noto Sans JP', sans-serif;
}

@importでフォントを読み込み、font-familyで”Noto Sans JP”を指定するだけです。

@importを使いたくない場合は、HTMLの<head>~</head>内に以下を追加してフォントを読み込みます。

<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">

文字の太さを調整したい場合は、以下のようにfont-weightを指定します。


h1 {
 font-weight:900;
}
 
p {
 font-weight:100;
}

あとがき

導入手順はとても簡単ですね。GoogleのCDN経由で提供されていますので、自前のサーバーにフォントを設置して読み込むよりも、高速でフォントを表示できます。

見た目も美しいですし、Webフォントを導入する際は、Noto Sans JPはおすすめです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です