サイトを制作していると、「フォントがいまいちなんだよなぁ・・・」って事ありませんか？
僕はいつも思います。
Macで見れば綺麗だが、Windowsでみるとあんまり・・・またその逆もしかり・・・
すべてimgで作ってしまえば問題は解決するのですが、SEO的にテキストを減らすのは良くないし、レスポンシブ化も面倒くさくなるし・・・
あちらを立てればこちらが立たぬを地で行くフォント問題。
しかし解決する方法有ります！
GoogleのWeb Font 【Noto Sans】を使用すればすべて解決！
以下実装方法
Noto Sansを読み込む
スタイルシートにimport urlを記入する場合
テーマにあるstyle.cssの先頭に記入
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
<head>内に記入する場合
<head>~</head>内に記入
[code language=”html”]
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">
フォントファミリーを指定
テーマのCSS 記述方法によりますが、このサイトではBodyに記述しています。
body {
font-family: 'Noto Sans Japanese', serif;
}
フォントの太さもしてできます。
このサイトではfont-weight:200;と設定しています。
.noto100 {font-weight:100;}
.noto200 {font-weight:200;}
.noto300 {font-weight:300;}
.noto400 {font-weight:400;}
.noto500 {font-weight:500;}
.noto600 {font-weight:600;}
.noto700 {font-weight:700;}
.noto800 {font-weight:800;}
.noto900 {font-weight:900;}
実装完了。
簡単でしたぁ
問題点
Google Web Fontは読み込みに時間がかかってしまう為、表示速度が遅くなってしまうデメリットがあります。
まぁキャッシュ使えば大丈夫ですけどね。
コメント