WebFontを利用してみる

2015年1月16日

Fontは好き嫌いでしかないとは思う。
1年ぐらい前に♥Love Font♥でも書いたけど

最近英数字FONTはSource Code Proに統一はしているが和文フォントはいまいち決めかねていた。
というかSource Code Proにしていたけど日本語フォントがあまり好きになれない。

和文フォントはLocalではMigu 1Mを使っていた。
少し丸みの帯びている和文フォントが好きな私。
だいぶ前に「Noto Font(Noto Sans CJK JP)」が出ていたけどローカルはMigu 1Mで困っていなかった。

でもこのページのデフォルトフォントを変更したくて使ってみた。
Webはスタイルシートで指定されているFontかデフォルトのフォントを使うのが普通だよね。

とうことで変更してみることにしました。
自前でフォントを配信すると転送量が増えそうなのでWeb FontとしてNoto Fontを探してみる。

さすがGoogle様!!!
ついでにタイトルのところも変更してみた。

変更前

微妙な違いだけど満足度はUP
設定は簡単でスタイルシートをちょこっと変更するだけ

@import “http://fonts.googleapis.com/earlyaccess/notosansjapanese.css”;
@import “http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700”;

body {
font: 15px/22px ‘Noto Sans Japanese’, “Ricty-Regular”, メイリオ, Meiryo, Osaka, sans-serif;
}

h1 {
font-family: ‘Open Sans Condensed’, sans-serif;
font-size: 40px;
text-transform: none;
}

今度は有償のフォントを使ってみたいなぁ〜