UNIRRY

WEBデザインとホロスコープと宇宙のブログ

webフォントでサイトデザインがいい感じになる やったね☆

webfont

このサイトでは見出しなどのテキスト部分をgooglewebフォントで実装しているのですが、これが普通のゴシックとかだとだいぶクオリティとか雰囲気が変わってきたかなーと思います。たいしたことないデザインなのに、なんかwebフォントのおかげで、良く見える!っていうのがいいです。

そんなわけなので、google web フォントのご紹介を。ただ、あんまり企業サイトとかでは使わなそうですね。webフォントって英語ばっかなので、ランディングとかタイポグラフィーデザインのページだと使用の機会がありそうです。

Google web フォント

www.google.com/fonts/

とりあえずこれを眺めて使いたいものに目星をつけます。ほとんどが1Styleしかないですが、ときどき7Styleもあったりして、boldの使い分けができていいです。

webfont2

これの真ん中のボタンをおして、使い方の説明ページへ。

webfont3

ページ真ん中くらいに必要なソースが書かれているので、それをコピペするだけ。

ヘッダーとjsとcssに、使用したいフォント用のソースを追加すればOK

ヘッダーに下記を追加

<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

jsに下記を追加

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Source+Code+Pro::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

cssに下記を追加

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

使いたいセレクタにフォントを指定する。

font-family: 'Source Code Pro', sans-serif;

これだけ!簡単です。

実は私、デザイン重視のwebデザイナーよりもデザインにそんなにこだわりがないという人なので(^○^)、こーゆーのすごいいいね!って思います。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3