特定のフォントがインストールされているか調べる方法

あるフォントがインストールされている場合は、そのフォントを使いたい。でもない場合は、WEBフォントを使用したい。そういった場合にフォントがマシンにインストールされているかどうかを調べる方法です。

ダミーのフォントと調べたいフォントで適当な文字列を見えない場所に置いてみてその大きさを比較するといいみたいです。大きさが違ったらそのフォントがインストールされているのがわかります。なるほどと思いました。

[追記]

こちら、Canvasの文字要素のフォントの選択の際に作成しました。
HTML要素の、ウェブフォントとローカルフォントの選択の際は、コメント欄に書いていただいた方法が有用です。

以下CoffeeScriptです。

fontCheck = (fontname)->
  # クォーテーション付きのfont-family対応
  fontname = fontname.replace /\'/g,"\'"
  fontname = fontname.replace /\"/g,"\'"

  testText = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!?1234567890あいうえおかきくけこさしすせそ"
  testStyle = "font-size:100pt; position:absolute; top:-10000px; left:-10000px; color:white; text-align:left; border:0; margin:0; padding:0 ;white-space:nowrap; "
  dummyStyle = testStyle+"font-family:dummyfont;"
  fontStyle = testStyle+"font-family:"+fontname+";"
  dummyText = "<div id='dummyText' style='"+dummyStyle+"'>"+testText+"</div>";
  fontText = "<div id='fontText' style='"+fontStyle+"'>"+testText+"</div>";

  $("body").append dummyText
  $("body").append fontText

  dummyTextSize = [$("#dummyText").width(),$("#dummyText").height()]
  fontTextSize = [$("#fontText").width(),$("#fontText").height()]

  $("#dummyText").remove()
  $("#fontText").remove()

  dummyTextSize[0] != fontTextSize[0] || dummyTextSize[1] != fontTextSize[1]

下記を参考にしました。

JavaScript/CSS Font Detector › lalit.org

レンダリングに使われているフォントと、ブラウザで使えるフォントを取得する - latest log