javascript - Dejavu Serif Bold を HTML Canvas のフォントとして動作させることができません。

Question

そのため、スクリーンショット/画像が描画されたキャンバスを含むjsFiddleがあり、テキストが正しいフォント(Dejavu Serif Bold)を使用してフォントマネージャーに表示され、正しく表示されています。次に、@font-face と html キャンバスを使用して同じフォントでスクリーンショットのテキストの上に同じテキストを描画しようとしましたが、同じようには見えません (月とその中にドットがある円から最もよくわかります) ）、 どうして？

jsFiddle: http://jsfiddle.net/gautamadude/zMKge/1544/

CSS

@font-face {
    font-family: 'Dejavu Serif Bold';
    src: url('http://labrador.is/media/media/DejaVuSerif-Bold.ttf');
}

Javascript

var ctx = document.getElementById('c').getContext('2d');
var dejavu_look = new Image();
dejavu_look.src = "http://labrador.is/media/media/dejavu_visual.png";
dejavu_look.onload = function(){
  ctx.drawImage(this, 0,0,this.width, this.height);
  ctx.font         = 'bold 50px "Dejavu Serif Bold"';
  ctx.fillStyle = 'orangered';
  ctx.textBaseline = 'top';
  ctx.fillText  ('♇♆♄♃♂☉♀☿☽⨁', 220, 320);
};