指定したフォントが存在するかどうか検出するJavascriptの関数

function detectFontsAvailable(fontFamilies) {
      var parentElem = document.getElementsByTagName("html")[0];
      var elem = document.createElement("span");
      elem.style.visibility = "hidden";
      elem.style.position = "absolute";
      elem.style.top = "-10000px";
      elem.style.left = "-10000px";
      elem.style.fontFamily = "__FAKEFONT__";
      elem.style.fontSize = "32px";
      elem.innerHTML = "abcdefghijklmnopqrstuvwxyz";
      parentElem.appendChild(elem);
      var defaultWidth = elem.offsetWidth;
      var defaultHeight = elem.offsetHeight;
      var result = false;

      for (i = 0; i < fontFamilies.length; i++) {
          elem.style.fontFamily = fontFamilies[i];
          result |= (elem.offsetWidth != defaultWidth || elem.offsetHeight != defaultHeight)
      }

      parentElem.removeChild(elem)
      return result;
}

JavaScript/CSS Font DetectorとJquery Font Available を参考に書いたもの。

親要素にbodyではなくhtml要素を使うことによって、body要素のonload前でもフォントの検出が可能になった。

たとえば以下のようにすると、MSPゴシックとIPAモナーフォントとモナーフォントがデバイスにインストールされているかどうかチェックできる。

detectFontsAvailable(["MS PGothic", "IPAMonaPGothic", "Mona"])

要はフォント適用後の要素のサイズが変化しているかどうかで存在チェックをかけているだけなので、たぶん等角フォントにはうまく効かない。試していないけど。



追記：
OSがXPだったりブラウザがIEだったりすると、この関数うまく働かないです。
注意。