Google Web Fonts 導入!! 威力発揮!!!

素晴らしいです。 Google Web Fonts 書体が美しい。他の部分のデザインのショボさをカバーしてくれる勢い! 以前からずっとフォントには悩んでいました・・・。画像で入れるのは面倒くさいし、SEO的には微妙な気がするし、でも、フォントがダサくて読む気が失せやすい・・・。 今回、導入で見た目の良さがグッと増しました!Noto Sans Japanese というフォントです!

Google Web Fonts 導入して表示速度は?

表示の読込速度はやや落ちます・・・。 API的にグーグルから引っ張ってこれるのがイイ、導入めちゃ楽です!!

Google Web Fonts 導入方法は?

超カンタンです。

手順.1

cssファイルで以下の一文を追加してグーグルよりフォントを読みこみます。

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

手順.2

下記の様に、フォントを指定したいところへ『font-family: ‘Noto Sans Japanese’, sans-serif;』を指定します。

尚、下記の記載方法ではbody内全てに適用される為、element style の様な感じです。 h1やh2やpなどを独自にフォント設定しているサイトの場合はそのあたりの修正も手作業で必要になります。

body *{ font-family: ‘Noto Sans Japanese’, sans-serif; }

フォントは、WEBデザインのプロの方々の中ではWEBサイトの”声優”と言う人もいるくらいサイトを見る人の感情に影響します。

是非、お試しください!

 

コメントを残す