CSS Google Web Font のNoto Sansをホームページに!!

Article views295 VIEW

サイトを制作していると、「フォントがいまいちなんだよなぁ・・・」って事ありませんか?

僕はいつも思います。

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>内に記入

  <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は読み込みに時間がかかってしまう為、表示速度が遅くなってしまうデメリットがあります。

まぁキャッシュ使えば大丈夫ですけどね。

参考にしたサイト

【Font】Google Web Fonts で日本語フォントの[Noto Sans Japanese]を使う。

Pocket
pinit fg en rect gray 28 - CSS Google Web Font のNoto Sansをホームページに!!
line88x20 - CSS Google Web Font のNoto Sansをホームページに!!
[`evernote` not found]

Posted in CSS

Leave a Comment

CAPTCHA