【JavaScript】Twitterの名前部分をGoogleFontAPIで洒落たフォントにするブックマークレット

---

追記 Hatena::Letに投稿してみました。

http://let.hatelabo.jp/cancer6/let/gYC-ypbCp6mDIQ

Google Font API なるものが公開されていたのでちょっと遊んでみた。 下記の一文を”Twitterのページを開いている状態”でロケーションバーにはりつけてエンターキーどーん。

javascript:(function(s){s.src="http://unolabo.boo.jp/misc/googleapi/google_fonts.js";document.body.appendChild(s)})(document.createElement('script'));

JSについては下記。

google_fonts.js

(function(api){
  var api2 = api;
  api.type = api2.type = "text/javascript";
  api.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js";
  api2.src = "http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js";
  document.body.appendChild(api);
  document.body.appendChild(api2);
  if(location.href.indexOf('http://twitter.com/') != -1){
    setTimeout(function(){
      if(!window.jQuery || !window.WebFont) arguments.callee;
      else {
        WebFont.load({
          google:{
            families: ['Lobster', 'Yanone Kaffeesatz']
          }
        });
        $('.screen-name').css('font-family', 'Lobster');
        $('.username').css('font-family', 'Yanone Kaffeesatz');
        $('a.screen-name, a.username').css({
          'font-weight': 'bold',
          'font-size': '120%'
        });
      }
    },100);
  }
})(document.createElement("script"));

Google API から引っ張ってきたかったけどどうにもうまく読み込めなかったので body に append することで妥協。

せっかくWebFontLoader使ったんだし、自由にフォントを変えられるようにしたいなぁ。