神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

【Web制作】Noto Sans JPをサイトのフォントとして設定するには??

2019.06.09
Web制作

 Googleが提供している日本語Webフォントの中で、近年よく使われているフォントにNoto Sans JPというものがあります。

実は当サイトもこのNoto Sans JPを使用しているのですが、今回はこのNoto Sans JPをサイトのフォントとして設定する方法についてお話したいと思います!

<head>~</head>内にGoogleフォントのCSSを記述する

 まず初めに<head>~</head>内に以下の記述をしましょう。

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

Noto Sans JPでフォントを表示させたい要素にCSSを設定する

 続いて、Noto Sans JPを設定したい要素のCSSに以下のCSSを記述します。

font-family: 'Noto Sans JP', sans-serif;

もしサイト全体のフォントをNoto Sans JPにしたい場合は以下のようにbodyにCSSを設定しましょう。

body {
	font-family: 'Noto Sans JP', sans-serif;
}

この2工程を行うだけで、サイトのフォントをNoto Sans JPで表示させることができるようになります!

まとめ

 Noto Sans JPは個人的に見やすい&キレイな日本語フォントだと思うので、是非ともNoto Sans JPを使いたい方は今回紹介した方法でサイトのフォントをNoto Sans JPにしてみてください!

スポンサーリンク
検 索