Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

フォントを変える Google web font Noto Sans Japaneseの導入

フォントの指定は全体を変えるならbodyに

 body { font-family:'“Lucida Grande”', '“segoe UI”', '“ヒラギノ丸ゴ ProN W4”', '“Hiragino Maru Gothic ProN”', “メイリオ”, Meiryo, Verdana, Arial, sans-serif;}

このように指定します。
フォントは環境によっては表示されないこともあるので、標準フォントも含めて複数指定した方がいいと思います。

Google Fontsを利用する

GoogleのwebフォントNoto Sans Japaneseを指定しました。
見やすくてきれいな日本語フォントです。

Noto Sans Japaneseの導入方法

① @importで読み込む

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

↑をデザインCSSに貼り付けて下さい。

② head内でlink要素で読み込む(こちらの方が速いという噂)

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

↑をダッシュボード>設定>詳細設定>headに要素を追加に貼り付けて下さい。


また以下の著作権表記をデザインCSSに追加して下さい。

/* "Noto Sans CJK JP" licensed under the SIL Open Font License
 * https://www.google.com/get/noto/#sans-jpan*/

フォントを使いたいところに指定する

全体

body {
font-family: 'Noto Sans Japanese','“Lucida Grande”', '“segoe UI”', '“ヒラギノ丸ゴ ProN W4”', '“Hiragino Maru Gothic ProN”', “メイリオ”, Meiryo, Verdana, Arial, sans-serif;}

ブログタイトル

#title { font-family: 'Noto Sans Japanese';}

全体に使うと表示が遅くなりますので、タイトルだけ指定というのがおすすめです。

英数字のきれいなフォント Lato

日付の.dateとサイドバーのタイトル.hatena-module-titleにGoogle Font Latoを指定しています。

Google Fontを読み込んで 適応させたいクラスなどにフォントファミリーを指定します。
font-family: 'Lato', sans-serif;

フォントによって印象はぐっと変わります。サイト、ブログにあったフォントをお選び下さい

おすすめのGoogle Web Fonts 25選 | それからデザイン スタッフブログ

【Font】使い勝手の良いオススメの Google Web Fonts サンセリフ系 × 11選。 - ONZE