シロクマは冬眠したい

デザインのこと、買ったもののレビューとか書きます

早速ブログのフォントに Google Fonts (日本語)を導入

早速ブログカスタマイズの第一歩として、フォントに Google Fonts を導入しました。最近気づいたんですが、Google Fontsで日本語が使えるようになっていたんですね。

googlefonts.github.io私は仕事で源の角ゴシックをwebフォントに設定するときは、
サブセット化(第一水準漢字のみ抜き出す)してサーバーにUP

.eot .woff .otf も作成して、cssで主要ブラウザに対応させる

っていうめんどくさい手順を踏んでいたのに…早速、今回はこの「Google Fonts + 日本語 早期アクセス」を利用した手順を書いていきます。

1.まずは好きなフォントを選ぶ

早速「Google Fonts + 日本語 早期アクセス」にアクセスします。googlefonts.github.io私はウエイトが沢山あるのがいいなと思ったので、源の角ゴシック(Noto Sans Japanese)を選びました。webフォントではめずらしい明朝体フォントの「さわらび明朝」https://googlefonts.github.io/japanese/#sawarabiminchoがあるので、今度機会があったら使用してみたいなーと思っています。

2.head内にコードを追加する

具体的には、https://googlefonts.github.io/japanese 内の↓のところをコピーします。

f:id:hatarakitakunaingo:20161213132351p:plain

 そしてはてな管理画面の設定に飛びます。

f:id:hatarakitakunaingo:20161213132929p:plain

「設定画面」の「基本設定 詳細設定 公開設定」とある中の「詳細設定」を選択してスクロールしていきます。すると、「headに要素を追加」という項目があるので、先ほどコピーしたコードを貼り付けます。

f:id:hatarakitakunaingo:20161213133108p:plain

3.css内にコードを追加する

webフォントを使用するには、css側でも設定しなければいけません。まずはhttps://googlefonts.github.io/japanese 内の↓のところをコピーします。

f:id:hatarakitakunaingo:20161213134827p:plain

 次に、はてなのデザイン変更画面に移動します。そこで カスタム (スパナマーク)をクリックし、一番下の方にあるデザインCSSに先ほどコピーしたコードをペーストします。

f:id:hatarakitakunaingo:20161213134852p:plain  

私の場合は、ブログ全体のフォントを変更したかったので、.wf-notosansjapaneseと言うクラス指定を body に変更しています。

おしまい 

これで変更を保存してみたら、反映されているはず!確認してみてねbody全体にかけちゃったから、もしかしたらページの表示が重くなっちゃうかも…ちょくちょく確認しつつ、修正を加えて行こうかと思います。

追記(2016/12/31)

現在は一時的にこのブログから源の角ゴシックの適用を外しています